css 给定内容和位置的 z-index 问题属性

Question

我知道这个问题被问过很多次了。但我找不到这个问题。我有一个带有两个伪元素的 div-Box (::after & ::before)。他们都有内容属性和 position: absolute.

伪元素应该在父元素的后面。所以我分别将 Z-Index 设置为 0 -1.

但是它不起作用？

CSS:

.brand {
  position: relative;
  width: calc((100% / 4) - 90px);
  height: 200px;
  background-color: blue;
  z-index: 0;
  float: left;
  padding: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
   &:nth-child(4n) {
     margin-right: 0 !important;
 }
&::after,
&::before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: pink;
  position: absolute;
  z-index: -1;
}

&::before {
  z-index: -1;
  top: -10px;
  left: -10px;
  border-top: 0px solid $theme_dark;
  border-left: 0px solid $theme_dark;
}
&::after {
  bottom: -10px;
  right: -10px;
  border-bottom: 0px solid $theme_dark;
  border-right: 0px solid $theme_dark;
}
}




<div class="brands">
 <div class="brand">
 <img src="typo3conf/ext/webcrunch_sitepackage/Resources/Public/Images/brands/Logo_Bull-Vodka_RGB.svg" alt="">
 </div>
 <div class="brand"></div>
 <div class="clear"></div>
 </div>

这里是 fiddle： jsFiddle

谢谢

Answer 1

您可以使用 CSS3 转换来完成。您将 position:relative 添加到父级，因此堆叠上下文阻止它落后。

将以下样式添加到 .brand

transform-style: preserve-3d;

并在下方添加伪元素

transform: translateZ(-1px)

Working fiddle

css 给定内容和位置的 z-index 问题属性

css z-index issue with given content and position property

html

css

sass

css 给定内容和位置的 z-index 问题 属性

css z-index issue with given content and position property

html

css

sass

css 给定内容和位置的 z-index 问题属性