0

I'm trying to hide part of the ::after element of a absolute positioned div.profile-dropdown element by making the z-index of div.profile-dropdown to be 2 and the z-index of the ::after element to be smaller, 1. This doesn't work. Any help would be appreciated.

<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>

Here's the 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%);
        }
    }
}
quantdaddy
  • 1,375
  • 4
  • 19
  • 29
  • you need to use a negative z-index. z-index of your pseudo is calculated from its parent which is alike 0 for any of its pseudo or children. z-index:2 is only about the parents or siblings – G-Cyrillus Aug 09 '17 at 19:20
  • @GCyrillus I'm using the idea from this https://jsfiddle.net/3byqw769/. In the fiddle, no negative z index is used. The z-index of parent is a number higher than the z index of the pseudo element. – quantdaddy Aug 09 '17 at 19:23
  • what about when you put it inside ? https://jsfiddle.net/3byqw769/228/ it works because :before and :after are siblings ;) – G-Cyrillus Aug 09 '17 at 19:30
  • I didn't get it. I'm also confused in the fiddle `:` is used instead of `::` for pseudo element. I tried doing that and it didn't work either. – quantdaddy Aug 09 '17 at 19:42
  • @GCyrillus what do I put inside? It's not clear from the fiddle. – quantdaddy Aug 09 '17 at 19:55
  • see this post: https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e – McHat Aug 09 '17 at 20:07
  • I have tried that too. I think the issue is that I'm applying transform to the ::after element. That messes up the stacking context in a way that I don't understand right now. – quantdaddy Aug 09 '17 at 20:08
  • Or it is probably because I am applying transform to the parent element. This creates a new stacking context. This is much more complicated than I thought. Any help? – quantdaddy Aug 09 '17 at 20:16
  • Okay so I was able to get the effect I was looking for by removing the border-bottom and border-right completely and adding a background color to the pseudo element. However, the problem of hiding a transformed element behind its parent still remains. – quantdaddy Aug 09 '17 at 20:38
  • it is indeed the way removing the borders, but it has to be on top to hide part of the top border of profile. To let element goe below, you do not need to inbricate that much of positionned elements. where you used position:absolute + transform , margincould have been fine to be used https://jsfiddle.net/cc5ghzv9/ – G-Cyrillus Aug 09 '17 at 21:24
  • To hide the border of profile, I just added same color background as the profile to the pseudo element. Transform was needed because I have to rotate the the pseudo element to give it a triangle top shape. I was trying to create the same dropdown effect as the profile tab in https://medium.com – quantdaddy Aug 09 '17 at 21:29

1 Answers1

0

Have you tried overflow:hidden at all?

Web Limitless
  • 51
  • 3
  • I want to hide the part of child inside the parent. This only works for hiding part of child outside the parent. – quantdaddy Aug 09 '17 at 19:24