固定元素覆盖父级滚动条

Question

我遇到固定元素和滚动条的问题。有没有办法在父元素的滚动条后面移动固定元素？这是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>

Answer 1

您可以向z-index添加否定.fixed-element（或者，通常，确保它小于.scrollable-container的{​​{1}}，默认为0 }）。请注意，这会使.scrollable-container的内容也显示在前面（包括.very-long-content的内容）。

我建议你，如果可能的话，不要嵌套固定元素，因为they are always positioned relative to the screen's viewport。

Answer 2

显示的图片

这就是你的固定元素应该是什么样的

.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;
  z-index: -1000;
}