当父亲是相对的时候的固定位置

所以不确定这个是否可能，但是从我对规范的理解中，位置固定元素的父母应该是视口而不是具有位置相对的父母元素。当父亲是相对的时候的固定位置

这显然都适用于定位，但不适用于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从编辑器放置嵌入代码的位置移动元素，并在用户滚动过去元素时将其添加到主体。

其他人碰到过这个或有什么想法？

来源

2017-05-24 Chris Bell

因为你有两个元素相同的z-index值？ z-index：3; .el-one会修复它 – NightKn8

只需增加''z-index'。el-one'高于你想要重叠的范围 – Swellar

你想要类似这样的东西吗？增加.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>

来源

2017-05-24 07:34:23 Swellar

使用下列之一：

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

来源

2017-05-24 07:34:53 Gerard

对不起，我错过了这个问题的一个重要部分。由于我创建了一些嵌入代码，用户将在那里发布网站，我只能访问im-fixed div，因此我无法更改页面的其余部分。这是将用户将嵌入代码放入页面生成器中的错误 –

有几种方法来解决这个问题。增加Z指数，清理div等

我认为你是有点尝试粘头功能。位置CSS属性有一个新的值。

position: sticky

我已经清理了代码，并删除了所有Z-指数。请检查附加的代码片段。

注意：仅支持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>

来源

2017-05-24 08:20:27 Siva

当父亲是相对的时候的固定位置

回答

相关问题