Question

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

显然，所有这些都适用于定位，但不适用于z-index。

如果你看看这个例子，

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

使用以下内容：

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

Answer 3

有几种方法可以解决这个问题。增加Z-Index，清理div等等。

我认为你有点尝试粘贴标题功能。位置CSS属性有一个新值。

position: sticky

我已清理代码并删除了所有Z-Index。请查看附带的代码段。

注意：仅在Chrome，Firefox中受支持 IE不支持。

.parent {
  background-color: green;
  position: relative;
  width: 100%;
  height: 5000px;
}

.header {
  position: sticky;
  top: 0px;
  left: 0px;
  height: 50px;
  background-color: yellow;
}

.el-one {
  background-color: blue;
  color: white;
  height: 100px;
  width: 100%;
}

.el-two {
  background-color: orange;
  height: 500px;
  width: 100%;
}

<div class="parent">
  <div class="header">I am a header</div>
  <div class="container">
    <div class="el-one">
      I am el-one
    </div>
    <div class="el-two">
      I am el-two
    </div>
  </div>
</div>

当父亲是亲戚

3 个答案: