Изменить положение CSS всех родительских элементов, но отрицательный z-индекс CSS не работает должным образом - PullRequest
Новая
       47

Изменить положение CSS всех родительских элементов, но отрицательный z-индекс CSS не работает должным образом

0 голосов
/ 26 февраля 2019

Я создал эффект кнопки CSS.Я видел, как некоторые люди используют отрицательный z-индекс.Я использовал его, и он работает правильно, но меня смущает его странное поведение.

Вот моя HTML-разметка: 

<div class="container">
  <div class="btn">
    <a href="#">Click Me</a>
  </div>
</div>

Я установил относительное положение '.container', абсолютное значение '.btn', относительное значение 'a' и абсолютное значение a :: after.Я дал -1 z-index для 'a :: after'.но почему 'a :: after' не распространяется на все элементы.но когда я устанавливаю 'a :: after' z-index 2 и 'a' z-index 3, эффект кнопки не работает должным образом, 'a :: after' цвет фона выше 'a'.почему эти два метода работают по-разному?почему 'a :: after' не попадает под все элементы первого метода.

Вот мой код CSS: 

.container{
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #100f33;
  margin: 0 auto;
}
.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  display: block;
  position: relative;
  padding: 20px;
  border: 1px solid #75230f;
  width: 80px;
  margin: 0 auto;
  overflow: hidden;
}
.btn a::after{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: 0;
  height: 100%;
  background-color: #840f38;
  transition: all 0.3s;
}
.btn a:hover::after{
  width: 100%;
}

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Сначала я бы упростил ваш код, как показано ниже, чтобы избежать использования псевдоэлемента и работы с z-index

.container{
  position: relative;
  width: 400px;
  height: 300px;
  background-color: #100f33;
  margin: 0 auto;
}
.btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn a{
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  display: block;
  position: relative;
  padding: 20px;
  border: 1px solid #75230f;
  width: 80px;
  margin: 0 auto;
  overflow: hidden;
  background:linear-gradient(#840f38,#840f38) center no-repeat;
  background-size:0% 100%;
  transition: all 0.3s;
}
.btn a:hover{
  background-size:100% 100%;
}
<div class="container">
  <div class="btn">
    <a href="#">Click Me</a>
  </div>
</div>

Тогда вы можете обратиться к этому вопросу, чтобы лучше понять z-index и контекст стека: Понимание порядка стекирования z-index

0 голосов
/ 26 февраля 2019

z-index - это совершенно другая тема в css.Если вы хотите отправить :after область, перейдите на страницу ниже.Вам необходимо присвоить z-index свойство элементу a.(После этого изменения вы потеряете свою кликабельную ссылку.)

Потому что:

z-index всегда работает с родительским элементом.Если вы добавите z-index: 1 к .btn классу.Вы создадите новый слой для всех .btn дочерних элементов.

Если вам нужна дополнительная информация о z-index и слоях.Вы должны посетить здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

...