首先，这里有一个带有示例的codepen：http ://codepen.io/anon/pen/VPPjYp
HTML：
<body>
<ul>
<li class="blabla span6">
asdfasdf<br>
<span>asdfas</span>
<div class="bleble"></div><br>
<div class="wrapper">
<div class="parent">
<div class="child"><div class="blibli">aabasdg</div></div>
</div>
</div>
</li>
</ul>
</body>
CSS：
.wrapper { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }
.blabla {
overflow:hidden;
background-color: red;
height: 90px;
margin: 10px;
padding: 10px;
position: relative;
}
.bleble{
height: 10px;
width: 90px;
background-color: blue;
}
.blibli{
height: 150px;
width: 60px;
background-color: orange;
}
body {
height: 900px;
background-color: lightgreen;
}
在该代码库中，您将看到：
从示例中可以看到，当您向下滚动页面的正文时，橙色div会在溢出隐藏的“ li”元素之外保持相同的固定位置。
我想发生的是，橙色框仍然隐藏在溢出的外面（如现在），但是位于父元素的相对位置（在那个cas中为“ li”），所以当您向下滚动时，它不会在页面中的固定位置上，但在相对于父对象的相对位置上。
我想强调一个事实，那就是它应该跳过父级隐藏的溢出...这是无法更改的条件...
如果可能的话，没有javascript且仅使用CSS ...
你们当中有人知道这是否真的可能吗？
您可以通过以下方式做到这一点：
position: relative从中删除.blablaposition: absolute上.wrapper，.parent和.child。.wrapper {
position: absolute;
width: 1280px;
}
.parent {
position: absolute;
}
.child {
position: absolute;
width: 960px;
}
.blabla {
overflow: hidden;
background-color: red;
height: 90px;
margin: 10px;
padding: 10px;
}
.bleble {
height: 10px;
width: 90px;
background-color: blue;
}
.blibli {
height: 150px;
width: 60px;
background-color: orange;
}
body {
height: 900px;
background-color: lightgreen;
}<body>
<ul>
<li class="blabla span6">
asdfasdf
<br>
<span>asdfas</span>
<div class="bleble"></div>
<br>
<div class="wrapper">
<div class="parent">
<div class="child">
<div class="blibli">aabasdg</div>
</div>
</div>
</div>
</li>
</ul>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句