Javascript 显示溢出隐藏容器外部的元素

我有一个

，它可以通过固定高度的

进行滚动

此

有一个下拉组件（图像中

1st

行的

2nd

列中的蓝色容器和下面给出的jsfiddle）隐藏在容器

后面。我希望它显示所有选项

（示例）

我应该如何将下拉组件带到容器外部，以显示下图所示的所有选项

如果我删除了

pretive

容器，则下拉列表完全可见-但当我滚动时，下拉列表不会与其容器一起滚动

提前谢谢

---

PS：仅查找CSS/javascript解决方案。

只要下拉列表是

.main的子项，就不可能仅使用CSS。这是因为您的
.main
具有
overflow-y:scroll你不能既吃蛋糕又吃蛋糕。
这里的问题是，你想让下拉列表“逃逸”它的父项，同时保持相对于它的父项。这恐怕是不可能的

如果绝对定位下拉列表，则将其“绑定”到其直接父链中具有
position:relative
的最近元素，或者如果没有此类元素，则将其绑定到
html
元素。有一个“技巧”，如果您不提供任何
上/下/左/右
-值，元素仍会将其自身定位在内联时可能开始的位置

这就是为什么当我们移除相对定位的包装时，绝对定位的下拉列表“逃逸”了
overflow-y:hidden
main上的值（因为它附加到
html
-元素）。这也意味着只要html元素没有被滚动，它的位置就不会受到影响

当您在
.main
中有一个相对定位的包装器时，下拉列表会像其他内容一样被截断。
这就是您要查找的内容吗

<div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <select class="dropdown">
                    <option class="option">Zero</option>
                    <option class="option">One</option>
                    <option class="option">Two</option>
                    <option class="option">Three</option>
                    <option class="option">Four</option>
                    <option class="option">Five</option>
                    <option class="option">Six</option>
                </select>
            </td>
            <td>row1 column3</td>
        </tr>

HTML:

这是一个有效的技巧。但一定要自己测试

从位置更改类：相对于固定位置

.pRelative {
    position: fixed;
}

这是
您可以将下拉列表的位置更改为
固定的
，并使用js处理滚动，如下所示

<div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <select class="dropdown">
                    <option class="option">Zero</option>
                    <option class="option">One</option>
                    <option class="option">Two</option>
                    <option class="option">Three</option>
                    <option class="option">Four</option>
                    <option class="option">Five</option>
                    <option class="option">Six</option>
                </select>
            </td>
            <td>row1 column3</td>
        </tr>


var main=document.getElementsByClassName（'main'）[0]；
var dd=document.getElementsByClassName（'pAbsolute'）[0]；
var offset=dd.getBoundingClientRect（）.top；
main.onscroll=函数（）{
var st=main.scrollTop；
滴滴涕=（偏移量-st）；
dd.style.top=滴滴涕+‘px’；
}
.main{
高度：100px；
溢出y：滚动；
溢出x：隐藏；
}
.序言{
位置：相对位置；
}
B.溶质{
位置：固定；
}
.下拉列表{
宽度：100px；
背景颜色：矢车菊蓝；
z指数：1000；
}
.选择权{
边框顶部：1px纯绿色；
边框底部：1px纯绿色；
}
表td{
边框：1px纯黑；
填充：10px；
}

第1行第1列
零
一个
两个
三
四
五
六
第1行第3列
第2行第1列
第2行第2列
第2行第3列
第3行第1列
第3行第2列
第3行第3列
第4行第1列
第4行第2列
第4行第3列
第5行第1列
第5行第2列
第5行第3列
第6行第1列
第6行第2列
第6行第3列
第7行第1列
第7行第2列
第7行第3列
第8行第1列
第8行第2列
第8行第3列
你想要这样吗


我已经删除了
的
位置：relative
。preative
您可以使用一个老式的
下拉列表获得所需的功能：


<div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <select class="dropdown">
                    <option class="option">Zero</option>
                    <option class="option">One</option>
                    <option class="option">Two</option>
                    <option class="option">Three</option>
                    <option class="option">Four</option>
                    <option class="option">Five</option>
                    <option class="option">Six</option>
                </select>
            </td>
            <td>row1 column3</td>
        </tr>


第1行第1列
零
一个
两个
三
四
五
六
第1行第3列
试试这个，
第1行第1列
零
一个
两个
三
四
五
六
第1行第3列
第2行第1列
第2行第2列
第2行第3列
第3行第1列
第3行第2列
第3行第3列
第4行第1列
第4行第2列
第4行第3列
第5行第1列
第5行第2列
第5行第3列
第6行第1列
第6行第2列
第6行第3列
第7行第1列
第7行第2列
第7行第3列
第8行第1列
第8行第2列
第8行第3列
**Css**
身体{
位置：相对位置；
}
梅因先生{
高度：100px；
溢出y：滚动；
溢出x：隐藏；
}
B.溶质{
位置：绝对位置；
}
.下拉列表{
宽度：100px；
背景颜色：矢车菊蓝；
z指数：1000；
}
.选择权{
边框顶部：1px纯绿色；
边框底部：1px纯绿色；
}
表td{
边框：1px纯黑；
填充：10px；
}
你不能轻易做到这一点，因为你的
.main
有
溢出：隐藏
。。。滚动时，您希望下拉列表也能滚动，对吗？@Nicolaeliu yes，这是h
try this ,


   <div class="main">
    <table>
        <tr>
            <td>row1 column1</td>
            <td>
                <div class="pRelative">
                    <div class="pAbsolute dropdown">
                        <div class="option">Zero</div>
                        <div class="option">One</div>
                        <div class="option">Two</div>
                        <div class="option">Three</div>
                        <div class="option">Four</div>
                        <div class="option">Five</div>
                        <div class="option">Six</div>
                    </div>
                </div>
            </td>
            <td>row1 column3</td>
        </tr>
        <tr>
            <td>row2 column1</td>
            <td>row2 column2</td>
            <td>row2 column3</td>
        </tr>
        <tr>
            <td>row3 column1</td>
            <td>row3 column2</td>
            <td>row3 column3</td>
        </tr>
        <tr>
            <td>row4 column1</td>
            <td>row4 column2</td>
            <td>row4 column3</td>
        </tr>
        <tr>
            <td>row5 column1</td>
            <td>row5 column2</td>
            <td>row5 column3</td>
        </tr>
        <tr>
            <td>row6 column1</td>
            <td>row6 column2</td>
            <td>row6 column3</td>
        </tr>
        <tr>
            <td>row7 column1</td>
            <td>row7 column2</td>
            <td>row7 column3</td>
        </tr>
        <tr>
            <td>row8 column1</td>
            <td>row8 column2</td>
            <td>row8 column3</td>
        </tr>
    </table>
</div>


**Css**


body{
  position:relative;
}
.main {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.pAbsolute {
    position: absolute;
}
.dropdown {
    width: 100px;
    background-color: cornflowerblue;
    z-index: 1000;
}
.option {
    border-top: 1px solid green;
    border-bottom: 1px solid green;
}

table td{
    border: 1px solid black;
    padding: 10px;
}