[英]How can I give a child element of one parent a higher z-index than another parent?
I have a sidebar split into two divs with an equal z-index. 我有一个侧边栏,它分为两个具有相等Z索引的div。
The first div, top
, has a link that shows another div, hover
when you hover over it. 第一个div,
top
,有一个链接,显示另一个div hover
,当你在它悬停。
hover
extends down into the bottom div, bottom
, but since top
and bottom
have the same z-index, hover
is covered by bottom
. hover
向下延伸到底部div, bottom
,但是由于top
和bottom
具有相同的z索引,因此hover
被bottom
覆盖。
No matter how high of a z-index I give bottom
, that only affects how it is displayed within top
. 不管我给
bottom
赋予z-index多高,都只会影响它在top
显示方式。 How can I get it to cover up bottom
? 我怎样才能得到它掩盖了
bottom
?
By the way, I also want to do the same thing to bottom
, so there will be a bottom-hover
that should cover up top
. 顺便说一句,我也想对
bottom
做同样的事情,因此会有一个应该bottom-hover
在top
的bottom-hover
。
So giving top
and bottom
different z-indexes isn't an option. 因此,给
top
和bottom
不同的z索引不是一种选择。
Here's a fiddle to demonstrate: http://jsfiddle.net/tsnuh7q1/ 这是一个小提琴来演示: http : //jsfiddle.net/tsnuh7q1/
html: 的HTML:
<div class="top">top
<div class="hover">HOVER</div>
</div>
<div class="bottom">bottom<div>
css: CSS:
.top {
width: 200px;
height: 100px;
background: blue;
z-index: 3;
position: relative;
}
.hover {
z-index: 40;
width: 170px;
height: 300px;
position: absolute;
background: red;
left: 30px;
}
.bottom {
width: 200px;
height: 100px;
background: green;
z-index: 3;
position: relative;
}
The child z-index
is always in the context of the parent. 子
z-index
始终位于父级上下文中。
Take 采取
#A { z-index: 1; }
#B { z-index: 2; }
#A * { z-index: 1000; }
children of #A
will always be under #B
and it's children. #A
孩子将永远在#B
下,并且是孩子。 The context of their z-index
is a lower layer. 它们的
z-index
的上下文是较低的层。
Came accross this question whilst searching for a solution for my own issue. 在为我自己的问题寻找解决方案时遇到了这个问题。 Couldn't help but giving it a go.
不由得放手一搏。
If I understand correctly what you're trying to do why not do it like this? 如果我正确理解您要做什么,为什么不这样做呢?
http://jsfiddle.net/tsnuh7q1/2/ http://jsfiddle.net/tsnuh7q1/2/
.top, .bottom { width: 100%; height: 100px; background: lightblue; position: relative; } .bottom { background: green; } .hover { position: absolute; top: 0; left: 10%; display: none; width: 100px; height: 150px; background: red; } a:hover .hover { display: block; } .bottom .hover { top: initial; left: initial; right: 10%; bottom: 0; } .top:hover, .bottom:hover { z-index: 1; }
<div class="top">top <a href="#0">link<div class="hover">HOVER</div></a> </div> <div class="bottom">bottom <a href="#0">link<div class="hover">HOVER</div></a> <div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.