@helpmeplease196

Почему не работает z-index?

<body>

  <div class="wrap">
  <div class="circle">
    <div class="inset_circle">
      <div class="triangle">
        <div class="text"></div>
      </div>
    </div>
  </div>
  </div>

</body>


*{ padding: 0;
  margin: 0;}

html, body {height: 100% ;
background-color:black }


.wrap{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items:center;
  position: relative;
}


.circle{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items:center;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  position: relative;
  background:rgb(0, 0, 0);
  box-shadow: 0 0 300px aqua;
  z-index: 3;
}

 

.circle:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  border-radius: 50%;
  box-shadow: -10px 10px 0 0#e8eee7;
  transform:  rotate( -10deg) scale(0.7, 0.7) translate(-10px, 40px) ;
  filter: blur(10px)
  
}
.circle:after {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background-color: #e8eee7;
  border-radius:10%;
  transform:   rotate(60deg)  scale(0.3, 0.1) translate(0px, -1000px)  ;
  filter: blur(1.5rem)
   
}


.inset_circle{
  width: 50%;
  height: 50%;
  background-color: black;
  border-radius: 50%;
  box-shadow: 0 0 10px rgb(42, 147, 196);
position: absolute;
display: flex;
justify-content: center;
align-items:center;
z-index: 1;

}




.inset_circle:before {
  content: " ";               
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 50px white  ;
  position: absolute;
}



.triangle{
  width: 0; 
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom:  200px solid rgb(115, 0, 255);
margin-bottom: 20px ;
position: absolute;
z-index: 2;
}


Нужно что бы уголки триугльника (.triangle) "спрятались " под .circle.

Позиционировнаие везде установлено. Но срабатывает только z index - 1. Почему?

Заранее спасибо за ответ
  • Вопрос задан
  • 140 просмотров
Пригласить эксперта
Ответы на вопрос 2
@nonconformiste
Потому что родительский блок не может перекрывать дочерний, это база.
Ответ написан
@ostup17
Начинающий программист (flutter dev - frontend de)
Понятия не имею почему не работает, но соглашусь с предыдущим комментарием.
Но! использовать индексы плохая привычка, старайтесь обходиться без использования индекса.
Я уверен, задачу можно решить одним лишь позиционированием
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы