javascript - parent 是相对的固定位置

Question

所以不确定这是否可行，但根据我对规范的理解，位置固定元素的父元素应该是视口(viewport)而不是具有相对位置的父元素。

当涉及到定位时，这显然都有效，但不适用于 z-index。

如果你看一下这个例子，

.parent {
  height: 1000px;
}

.el-one {
  position: relative;
  z-index: 2;
  height: 100px;
  width: 100%;
  color: red;
}

.el-two {
  position: relative;
  z-index: 2;
  background-color: black;
  height: 500px;
  width: 100%;
}

.im-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

<div class="parent">
  <div class="el-one">
    <div class="im-fixed">Hello</div>
  </div>
  <div class="el-two"></div>
</div>

https://codepen.io/anon/pen/mmvXaE

如果向下滚动，固定元素位于黑色部分后面，我需要的是一种将红色元素移到前面而不将其移出 el-one 的方法。

我有一个元素，其中一些嵌入代码需要在您滚动过去时固定，这是实际代码的更好示例。上面的例子只是简单地强调了这个问题:

<div class="parent">
  <div class="el-one">
    <div id="my-wrapper">
      <iframe class="im-fixed"></iframe>
    </div>
  </div>
  <div class="el-two"></div>
</div>

,

我在网上找到这个关于我认为导致问题的原因:https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements但没有运气找到解决方法。

我能想到的就是使用 JS 将元素从编辑器放置嵌入代码的位置移动，并在用户滚动经过该元素时将其添加到主体。

还有其他人遇到过这个问题或有任何想法吗？

Answer 1

你想要这样的东西吗？将 .el-one 的 z-index 增加到高于您要重叠的那个

.parent {
  height: 1000px;
}

.el-one {
  position: relative;
  z-index: 99;
  height: 100px;
  width: 100%;
  color: red;
}

.el-two {
  position: relative;
  z-index: 2;
  background-color: black;
  height: 500px;
  width: 100%;
}

.im-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

<div class="parent">
  <div class="el-one">
    <div class="im-fixed">Hello</div>
  </div>
  <div class="el-two"></div>
</div>