Блог

Главная - Вопросы по программированию - Z-index не работает с псевдоэлементом ::after

Z-index не работает с псевдоэлементом ::after

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы белый круг был над внутренним кругом. Я не понимаю, почему z-индекс не работает, когда оболочка имеет относительную позицию и не имеет z-индекса. Я делал нечто подобное в предыдущем испытании на site css battle, и это сработало.

 <div class="wrapper">
</div>
<style>
  body{
    display:grid;
    place-content:center;
    background-color:#191919;
  }
  .wrapper {
    position:relative;
    width: 100px;
    height: 100px;
    border-radius:50%;
    background: #E08027;
    overflow:hidden;
    box-shadow: 0 0 0 30px #824B20;
    
    
      
  }
  
 
  .wrapper::before {
    content:'';
    width: 100px;
    height: 50px;
    position:absolute;
    top:20;
    left:-20px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border: 20px solid #FFF58F;
    border-top:0px;
    z-index:5;
   
}
   
  
  
</style>

Ответ №1:

 <div class="wrapper">
</div>
<style>
  body{
    display:grid;
    place-content:center;
    background-color:#191919;
  }
  .wrapper {
    position:relative;
    width: 100px;
    height: 100px;
    border-radius:50%;
    background: #E08027;
    box-shadow: 0 0 0 30px #824B20;
    
    
      
  }
  
 
  .wrapper::before {
    content:'';
    width: 100px;
    height: 50px;
    position:absolute;
    top:20;
    left:-20px;
    border-bottom-left-radius: 110px;
    border-bottom-right-radius: 110px;
    border: 20px solid #FFF58F;
    border-top:0px;
    z-index:5;
   
}
   
  
  
</style>

Я не уверен, понял ли я ваш запрос, но скажите мне, поможет ли это при удалении overflow: hidden; (попробуйте запустить фрагмент выше)

Метки: