Почему фон псевдоэлемента скрывает родительский фон? - PullRequest
Новая
       40

Почему фон псевдоэлемента скрывает родительский фон?

0 голосов
/ 14 марта 2019

Родительский background-color и border-radius скрыты за псевдоэлементом. Почему псевдоэлемент не находится за родителем, хотя он имеет z-index, равный -1? 

.btn {
  text-decoration: none;
  background-color: royalblue;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<a href="#" class="btn">Download free app</a>

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Преступник - это свойство transform, которое создает контекст стека, поэтому ваш псевдоэлемент будет закрашен внутри этого контекста стека и будет логически находиться над фоном, каким бы z-index вы не пользовались.

Удалите преобразование, чтобы увидеть разницу. Я увеличил border-radius и изменил цвет, чтобы лучше видеть. 

.btn {
  text-decoration: none;
  background-color: red;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 50px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<a href="#" class="btn">Download free app</a>

Если вы хотите, чтобы псевдоэлемент находился ниже родительского, вам следует избегать любых свойств, которые создают контекст стека, иначе это будет невозможно.

Или вы рассматриваете другой псевдоэлемент для создания фонового слоя, и вы сможете управлять укладкой так, как вы хотите: 

.btn {
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  padding: 20px;
  position: absolute;
  transform:translate(-50%,-50%);
  top: 50%;
  left: 50%;
}

.btn::before,
.btn::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  z-index:-1;
}

.btn::before {
  background-color: cornflowerblue;
}
.btn::after {
  background-color: red;
  border-radius: 50px;
}
<a href="#" class="btn">Download free app</a>

Некоторые связанные вопросы:

Почему элементы с z-index никогда не могут покрыть его дочерний элемент?

Есть ли способ разместить z-index не по родительскому элементу

0 голосов
/ 14 марта 2019

Вам просто нужно добавить overflow: hidden; к родительскому элементу. 

.btn {
  text-decoration: none;
  background-color: royalblue;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 5px;
  color: white;
  display: inline-block;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.btn::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: cornflowerblue;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<a href="#" class="btn">Download free app</a>
...