z-index 即使使用绝对定位也无法正常工作

Question

我正在尝试创建一条鱼，即使我正确设置了 z-index 属性，它的背鳍也不会落后于它的 body。这有什么问题吗？我知道我只能将 z-index 与定位元素一起使用。其他可能影响属性行为的因素是什么？

.fish{
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
}

.fish-body {
    position: relative;
    top: 40%;
    left: 23.5%;
    background: black;
    width: 53%;
    height: 45%;
    border-radius: 10% 150% 2% 150%;
    transform: rotate(142deg);

}

.backfin-top{
    position: absolute;
    top: 88%;
    left: 56%;
    background:yellow;
    width: 53%;
    height: 45%;
    transform: rotate(85deg);
    border-radius: 0% 50% 400% 10%;
    z-index:-1;
}

.backfin-bottom{
  position: absolute;
    bottom: 0%;
    right: -34%;
    background: yellow;
    width: 53%;
    height: 45%;
    border-radius: 10% 400% 10% 50%;
    z-index:-1;
}

 <div class="fish">
  <div class="fish-body">
    <div class="backfin-top"></div>
    <div class="backfin-bottom"></div>
  </div>   
 </div>

Answer 1

这是我的解决方案，

基本上，我不得不改变你的 html 结构。检查下面的片段

这是必需的，因为首先，

 <div class="backfin-top"></div>
 <div class="backfin-bottom"></div>

先画到屏幕上，再画鱼身

在你的例子中，将鳍放在 鱼体内 div 使得 z-index 无法将鳍放在鱼身后。

在下面的示例中 z-index 不需要将翅片放在后面。

.fish {
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
  position: relative;
}

.fish-body {
  position: relative;
  top: 40%;
  left: 23.5%;
  background: black;
  width: 53%;
  height: 45%;
  border-radius: 10% 150% 2% 150%;
  transform: rotate(142deg);
}

.backfin-top {
  position: absolute;
  top: 38%;
  left: -4%;
  background: yellow;
  width: 33%;
  height: 25%;
  transform: rotate(217deg);
  border-radius: 0% 50% 400% 10%;
 
}

.backfin-bottom {
  position: absolute;
  bottom: 15%;
  right: 70%;
  background: yellow;
  width: 33%;
  height: 25%;
  border-radius: 10% 400% 10% 50%;

  transform: rotate(317deg) scale(-1, -1);
}

<div class="fish">
  <div class="backfin-top"></div>
  <div class="backfin-bottom"></div>
  <div class="fish-body">
  </div>
</div>

z-index 在定位元素上和 transform 本身在元素上创建新的“stacking contexts”。这是发生了什么：

您的 .fish-body 元素已将 transform 设置为 none 以外的其他设置，这为其提供了自己的堆叠上下文。

然后添加 fins，这是 .fish-body 的 child。此 child 具有 z-index: -1，设置 fins 的堆栈级别 在 .fish-body 的堆栈上下文中设置 z-index: -1 fins 不会将其放在 .fish-body 之后，因为 z-index 仅在给定的堆叠上下文中才有意义。

当您从 .fish-body 中删除 transform 时，它会删除其堆栈上下文，导致 .fish-body 和 .fins 共享堆栈上下文（<html> ) 并使 fins 落后于 .fish-body。

Answer 2

index 在您的情况下不起作用，因为我们无法覆盖父 div 的 z-index。如果我们想使用 z-index 那么所有元素都应该是同一个父元素的子元素，我们也应该使用 position。请查看以下代码和输出。

    .fish{
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
        position: relative;
}
.fish-body {
    position: relative;
    top: 40%;
    left: 23.5%;
    background: black;
    width: 53%;
    height: 45%;
    border-radius: 10% 150% 2% 150%;
    transform: rotate(142deg);

}
.backfin-top {
    position: absolute;
    top: 45%;
    left: 0;
    background: yellow;
    width: 40%;
    height: 25%;
    transform: rotate(225deg);
    border-radius: 0 50% 400% 10%;
    z-index: -1;
}
.backfin-bottom {
    left: 0;
    position: absolute;
    bottom: 46px;
    background: yellow;
    width: 40%;
    height: 25%;
    border-radius: 10% 400% 10% 50%;
    z-index: -1;
    transform: rotate(135deg);
}

<div class="fish">

    <div class="fish-body"></div>
            <div class="backfin-top"></div>
            <div class="backfin-bottom"></div>
    

</div>

z-index 即使使用绝对定位也无法正常工作

z-index not working even with absolute positioning

css

z-index