Question

我正在尝试创建一条鱼，即使我使用正确设置的z-index属性，其后鳍也不会落在鱼体后面。这怎么了我知道我只能将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设置为除无之外的其他值，这为其赋予了自己的堆叠上下文。

然后添加一个fins的子代.fish-body。这个孩子有z-index: -1，在fins 的堆栈上下文中设置.fish-body 的堆栈级别在z-index: -1上设置fins不会将其放在.fish-body后面是因为z-index仅在给定的堆栈上下文中具有含义。

从transform中删除.fish-body时，它会删除其堆栈上下文，从而导致.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索引也不起作用

2 个答案: