隠し：その背後にある絶対的に配置され、変換されたdiv要素の要素

Question

た後、私は絶対の::after要素の一部を非表示にしようとしているが2と::afterのz-indexするdiv.profile-dropdownのzインデックスを作ることによってdiv.profile-dropdown要素を配置しました小さい方の要素は1です。これは機能しません。どんな助けもありがとう。ここで

<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%); 
     } 
    } 
} 

Answer 1

あなたがオーバーフローを試してみました：すべての隠されましたか？