CSS中的层叠效果_css盒子层叠效果-CSDN博客

本文链接：https://blog.csdn.net/duola8789/article/details/78286091

引言

在 HTML 中 DOM 节点正常来说是后面出现的会覆盖在前面出现的上面，现在要求不使用z-index要实现这样的一个效果：

准备工作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TEMP</title>
  <style>
    .container {
      width: 500px;
      height: 100px;
      border: 5px solid lightgrey;
      font-size: 0;
    }
    .container li {
      display: inline-block;
      width: 50px;
      height: 50px;
      margin-left: -10px;
      line-height: 50px;
      border-radius: 50%;
      border: 1px solid red;
      font-size: 14px;
      text-align: center;
    }
    .container li:nth-child(2n){
      background: ivory;
    }
    .container li:nth-child(2n+1){
      background: azure;
    }
  </style>
</head>
<body>
<ul class="container">
  <li class="first">1</li>
  <li class="second">2</li>
  <li class="second">3</li>
  <li class="second">4</li>
</ul>
</body>
</html>

这样的目前效果是：

层叠规则

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

方法0 使用`z-index`

使用z-index前提是，元素必须是定位元素，position的值只能是relative、absolulte、fixed

方法1：使用`direction` + `transform：scale(1)`

.container{
  direction: rtl;
}
.container li + li{
  transform: scale(1);
}

对于这个不用z-index而具有层叠效果的，并不是只有 transform，还有几个属性，可参考张鑫旭的文章：《深入理解CSS中的层叠上下文和层叠顺序》

可以改变层叠顺序的属性包括：

z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
元素的isolation值是isolate.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.

关于混合模式mix-blend-mode可以查看这篇文章，《CSS3混合模式mix-blend-mode/background-blend-mode简介》

方法2：`float：right`

.container li {
  float:right
}

方法3：`flex`

.container {
  display: flex;
  flex-direction: row-reverse;
}

方法4：`rotate`

.container {
  transform: rotate(90deg)
}
.container li {
  display: block;
  transform: rotate(-90deg) translateY(200px);
  margin-bottom: -10px;
  margin-left: 0;
}