[英]stacking order with z-index
hey guys i am having a small stacking order problem with z-index , a few question on SO actually deal with this issue but i am unable to resolve this issue inspite of reading a few indepth articles on Z-index , Like this one. 嘿家伙我有z-index的,对所以实际上这个问题解决了几个问题,一个小的堆叠顺序的问题,但我无法来解决这个问题inspite的阅读Z-指数的几个深入的文章,像这一个。
now the issue i am facing is i have the following CSS : 现在我面临的问题是我有以下CSS:
.grey-box {
position: relative;
padding: 50px 0;
background: #eee;
z-index: 9999999;
}
.grey-box:after {
content: '';
position: absolute;
top: 100%;
height: 30px;
width: 30px;
background: #eee;
left: 50%;
margin-left: -15px;
margin-top: -15px;
-webkit-transform: rotateZ(45deg); /* Safari */
transform: rotateZ(45deg);
z-index: 2;
}
.grey-box:before {
content: '';
position: absolute;
top: 90%;
height: 2px;
width: 100%;
background: red;
/*left: 50%;
margin-left: -15px;
margin-top: -15px;*/
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,1);
box-shadow: 2px 2px 5px rgba(0,0,0,1);
z-index: -1;
}
my issue is with the css not with html , so if you wanna see the whole problem in action please refer to this fiddle. 我的问题是css而不是html,所以如果您想了解整个问题,请参阅此小提琴。
now as you can see .grey-box
is the container and i am using two psudo elements which are absolutely positioned . 现在,如您所见,
.grey-box
是容器,我正在使用两个绝对定位的psudo元素。 now inspite of giving .grey-box a z-index of z-index: 9999999;
现在尽管给.grey-box一个z-index的
z-index: 9999999;
it still appears below . 它仍然显示在下方。
grey-box:before
and .grey-box:before
has a z-index of z-index: -1;
grey-box:before
和.grey-box:before
的z-index为z-index: -1;
. 。
how do i solve this issue , how do i make .grey-box
on top of .grey-box:before
?? 我该如何解决此问题,如何在
.grey-box:before
制作.grey-box
?
thank you. 谢谢。
Alex-z 亚历克斯-Z
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.