[英]Relatively positioned element in front of fixed element
Currently I have a structure that looks like this: 目前,我的结构如下所示:
<div id="header">
</div>
<div class="hook">
</div>
<div class="navbar">
</div>
<div class="content">
</div>
where the header is positioned absolutely on top, the hook is fixed, navbar positioned absolutely, and the content is positioned relatively. 标头位于绝对顶部的位置,挂钩是固定的,导航栏位于绝对位置,内容相对放置。 How can I get the hook to appear behind everything as you scroll? 滚动时,如何使该钩出现在所有内容的后面? Currently my only trouble is with getting the content to appear in front; 目前,我唯一的麻烦是让内容显示在最前面。 positioning it absolutely does the trick, but I'd like to keep it relative if possible. 定位绝对可以解决问题,但我想尽可能保持相对。
You can combine position: relative
and z-index: something-bigger-than-one
. 您可以组合position: relative
和z-index: something-bigger-than-one
。 Unless I'm misunderstanding you, this should do the trick? 除非我误解了您,否则应该成功吗?
Here's a fugly demo :) 这是一个丑陋的演示:)
http://jsfiddle.net/bvaughn/mopeu8Lw/ http://jsfiddle.net/bvaughn/mopeu8Lw/
By using the CSS operator; 通过使用CSS运算符;
z-index: n;
You can set its "layer", I always picture these almost like a sandwhich, I believe (but don't quote me on this), I think the way layering works by default is standard stacking, until you define them. 您可以设置它的“图层”,我总是将它们描绘成几乎就像沙子一样,我相信(但请不要在此引用我),我认为默认情况下,分层的工作方式是标准堆叠,直到您定义它们为止。 I hope this image helps you; 希望这张图片对您有所帮助;
You can see here that the blue element would sit on top of everything, followed by the red element, and then the black element. 您可以在此处看到蓝色元素将位于所有内容的顶部,然后是红色元素,然后是黑色元素。
http://i.stack.imgur.com/pd8iH.png http://i.stack.imgur.com/pd8iH.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.