隐藏:它背后绝对定位和转化div元素的元素之后
问题描述:
我试图隐藏绝对的::after
元素的一部分定位div.profile-dropdown
元素通过使div.profile-dropdown
的z指数是2,::after
的z-index
元素要小一点,1
。这不起作用。任何帮助,将不胜感激。隐藏:它背后绝对定位和转化div元素的元素之后
<div class="icon profile" *ngIf="logged_in">
<i class="fa fa-user-circle"></i>
<div class="profile-dropdown">
<div>Profile</div>
<div>Sign Out</div>
</div>
</div>
这里的SCSS:
div.profile {
position: relative;
.profile-dropdown {
position: absolute;
top: 0px;
left: 15px;
margin: auto;
width: 200px;
background-color: white;
transform: translate(-50%, 60px);
border: 1px solid rgb(220, 220, 220);
z-index: 2;
&::after {
position: absolute;
content: '';
width: 10px;
height: 10px;
border: 1px solid rgb(220,220,220);
z-index: 1; //z-index = -1 doesn't work either
top: 0;
left: 0;
right: 0;
margin: auto;
transform: rotateZ(45deg) translate(-50%, -35%);
}
}
}
您需要使用负Z指数。你的伪的z-index是从它的父亲计算出来的,对于它的任何伪或孩子,它都是0。 z-index:2只是关于父母或兄弟姐妹 –
@GCyrillus我使用这个https://jsfiddle.net/3byqw769/的想法。在小提琴中,没有使用负z指数。父元素的z索引是一个比伪元素的z索引更高的数字。 – quantdaddy
当你把它放进去时呢? https://jsfiddle.net/3byqw769/228/它的工作原理是:之前和之后:兄弟姐妹;) –