显示溢出隐藏容器外的元素 [英] Displaying an element outside overflow hidden container
问题描述
我有一个< table> ，可以通过将它包裹在< div> 固定高度。
此< table> 有一个下拉组件$ c> 列中的。我想要显示所有选项。第一个图像中的行和下面的jsfiddle ） c>< div>
更新
您可以通过创建新的堆叠上下文来修复 margin-top 问题。
（仅在safari 6.1 mac中测试 - 不幸的是在任何最新浏览器中都无法使用）
更新演示或另一个演示
更新
我可以找到隐藏固定元素溢出是剪辑容器（
.main {height：100px; overflow-y：scroll; overflow-x：hidden; margin-top：100px; position：absolute; clip：rect（auto，auto，99999px，auto）;}。pRelative {position：relative;} pAbsolute {position：fixed;} dropdown {width：100px;背景颜色：cornflowerblue; z-index：1000;}。option {border-top：1px solid green; border-bottom：1px solid green;} table td {border：1px solid black; padding：10px;}
< div class = > < table> < tr> < td> row1 column1< / td> < td> < div class =pRelative> < div class =pAbsolute dropdown> < div class =option>零< / div> < div class =option>一个< / div> < div class =option>两个< / div> < div class =option> Three< / div> < div class =option>四< / div> < div class =option> Five< / div> < div class =option>六< / 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列2< / 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>
演示
I have a <table> which is made scrollable by wrapping it in a <div> of fixed height.
This <table> has a dropdown component (blue container in 2nd column of 1st row in the image and jsfiddle given below) which is hiding behind the container <div>. I want it to display all the options Instead.
JSFIDDLE (example)
How should I bring the dropdown component outside the container <div> to display all the options as in the image below?
If I remove the pRelative container, then the dropdown is fully visible - But when I scroll, the dropdown does not scroll along with it's container.
Thanks in advance.
PS: Looking for CSS/javascript solution only.
You can change positioning of the dropdown to fixed and handle the scroll using js, like the following.
var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
var st = main.scrollTop;
ddt = (offset - st);
dd.style.top = ddt + 'px';
}
.main {
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
.pRelative {
position: relative;
}
.pAbsolute {
position: fixed;
}
.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;
}
<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>
Demo
Update
You can fix the margin-top issue by creating a new stacking context.
(tested only in safari 6.1 mac - unfortunately doesn't works in any latest browsers) Updated Demo or Another Demo
Update
The only possible cross browser workaround i could find for hiding the fixed elements overflow is to clip the container (this requires it to be a positioned element)
var main = document.getElementsByClassName('main')[0];
var dd = document.getElementsByClassName('pAbsolute')[0];
var offset = dd.getBoundingClientRect().top;
main.onscroll = function() {
var st = main.scrollTop;
ddt = (offset - st);
dd.style.top = ddt + 'px';
}
.main {
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 100px;
position: absolute;
clip: rect(auto, auto, 99999px, auto);
}
.pRelative {
position: relative;
}
.pAbsolute {
position: fixed;
}
.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;
}
<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>
Demo
这篇关于显示溢出隐藏容器外的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
