CSS中的层叠效果

引言

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

准备工作

  
  
  



  
1
  
2
  
3
  
4

这样的目前效果是：

层叠规则

• 谁大谁上：当具有明显的层叠水平标示的时候，如识别的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;
}

参考

• http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567539&idx=1&sn=caf3444c3772d5caa605fbb4e71153c5&chksm=f1e159a5c696d0b310af754fddef6434b1d6a1b6eb5274efc462d62255d5df01210898c1f914&scene=0#rd
• http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/