[英]How to stack a parent div above a div whilst it's child has a higher z-index than both?
I'm having some trouble with z-index in that I need a child element to have a higher z-index than it's parent, whilst the parent element still needs to be higher than the div above it. 我在使用z-index时遇到了一些麻烦,因为我需要一个子元素使其z-index高于其父元素,而父元素仍需要高于其上面的div。
I have created a jsFiddle to demonstrate what I'm trying to achieve I'm almost there but can't seem to get the scrolling-container
to scroll up and over the fixed-container
. 我创建了一个jsFiddle来演示我要达到的目标,但我几乎无法实现,但似乎无法使
scrolling-container
向上滚动并越过fixed-container
。
Udate: Important... I've tried making it position:absolute;
Udate:很重要...我试图将其
position:absolute;
and position:relative;
和
position:relative;
which works but seems to break the z-index for the site-nav
div, which needs to scroll over everything including the logo/links. 可以,但是似乎破坏了
site-nav
div的z-index,该索引需要滚动显示所有内容,包括徽标/链接。
I'm hoping a new pair of eyes will be able to see what I'm doing wrong, so any help would be appreciated. 我希望新的一双眼睛能够看到我做错了什么,因此能提供任何帮助。
HTML: HTML:
<div class="fixed-header-container">
<div class="logo">logo</div>
<div class="links">links</div>
</div>
<div class="fixed-container">
<img src="https://pbs.twimg.com/profile_images/599903869980823553/sNBE6oOk_400x400.jpg" />
</div>
<div class="scrolling-container">
<div class="site-nav"> Site Nav</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis quis elit facilisis consequat. Nunc libero nisi, sollicitudin quis iaculis eget...
</div>
CSS: CSS:
.fixed-header-container {
position:fixed !important;
top:0;
width: 100%;
z-index: 15;
}
.fixed-container {
height:auto;
position:fixed !important;
top:0;
width: 100%;
z-index: 1;
}
.logo {
background-color: red;
width: 50%;
float: left;
}
.links {
background-color: yellow;
width: 50%;
float: left;
text-align: right;
}
img {
max-width:100%;
}
.scrolling-container {
width:100%;
padding-bottom: 50px;
background: pink;
z-index:10;
}
.site-nav {
position:absolute;
z-index:40;
background-color: green;
text-align: center;
width: 40%;
margin: 0 auto;
height: 50px;
}
z-index
works on positioned elements only. z-index
仅适用于定位的元素。 Your .scrolling-container
is not positioned. 您的
.scrolling-container
未定位。
.scrolling-container {
position:relative;
/* … rest of your styles */
}
http://jsfiddle.net/3w5dt/16/ http://jsfiddle.net/3w5dt/16/
Since you need the .site-nav
to go above the fixed element on top as well, you could take it out of .scrolling-container
, and then give it the same margin-top
, as seen here: http://jsfiddle.net/3w5dt/17/ 由于您还需要
.site-nav
使其位于顶部的固定元素上方,因此可以将其从.scrolling-container
取出,然后将其设置为相同的页margin-top
,如此处所示: http:// jsfiddle。净/ 3w5dt / 17 /
Just use position: relative;
只是使用
position: relative;
on .scrolling-container. 在.scrolling-container上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.