固定元素和滚动条有问题。有没有办法将固定元素移动到父元素的滚动条后面?这是 fiddle .
body {
margin: 0;
}
.scrollable-container {
height: 100vh;
overflow-y: scroll;
}
.very-long-content {
height: 5000px;
}
.fixed-element {
background-image: url(http://space-kids.org/wp-content/uploads/2016/02/jupiter.png);
background-size: 100% 100%;
height: 300px;
position: fixed;
right: -100px;
top: calc(50% - 150px);
width: 300px;
}
<section class="scrollable-container">
<section class="very-long-content">
<div class="fixed-element"></div>
</section>
</section>
最佳答案
您可以向 .fixed-element
添加一个负的 z-index
(或者,一般来说,确保它小于 .scrollable-容器
,默认为0
)。请注意,这将使 .scrollable-container
的内容也显示在前面(包括 .very-long-content
的内容)。
如果可能的话,我建议你不要嵌套固定元素,因为they are always positioned relative to the screen's viewport .
关于html - 固定元素覆盖父元素的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45741727/