Quiz - 回顾

栏目: CSS · 发布时间: 5年前

内容简介：translateflex和margin:auto2. 元素为为定宽定高（自身包含尺寸的元素）的元素

CSS - 实现垂直居中的几种方式（特别：垂直居中）

1. 元素为未知宽高的元素

flex

http://www.ruanyifeng.com/blo...

display: flex;
justify-content:center;
align-items:Center;

translate

position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;

flex和margin:auto

.box{
    display: flex;
    text-align: center;
}
.box span{margin: auto;}

2. 元素为为定宽定高（自身包含尺寸的元素）的元素

绝对定位和负边距

position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;

绝对定位和0

原理：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样

width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0;

参考：

https://www.cnblogs.com/hutuz...

https://www.zhangxinxu.com/wo...

CSS - 层叠上下文、层叠顺序以及z-index

层叠上下文

1.HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。

2.普通元素设置position属性为非static值并设置z-index属性为具体数值（不能为auto,chrome特殊），产生层叠上下文。

3.CSS3中的新属性也可以产生层叠上下文

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；

元素的opacity属性值不是1；

元素的transform属性值不是none；

元素mix-blend-mode属性值不是normal`；

元素的filter属性值不是none；

元素的isolation属性值是isolate；

will-change指定的属性值为上面任意一个；

元素的-webkit-overflow-scrolling属性值设置为touch。

注意：

chrome 中 position:fixed 的z-index:auto，也会创建层叠上下文

层叠顺序

Quiz - 回顾

z-index

z-index属性值并不是在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果

判断元素在Z轴上的堆叠顺序，不仅仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定

确定顺序

1.是否处于同一个层叠上下文中，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。

2.如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。

3.当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

补充新增：

定位元素会层叠在普通元素的上面

元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。

而不支持z-index的层叠上下文元素天然z-index:auto级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的

实战

在实际项目中，我们可能会渐进使用CSS3的fadeIn淡入animation效果增强体验，有一个绝对定位的透明层覆盖在图片上,添加一些描述信息

Quiz - 回顾

现象：一旦图片开始走fadeIn淡出的CSS3动画，文字跑到图片后面去了

原理：opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index:auto级别，跟没有z-index值的absolute绝对定位元素是平起平坐的。而本demo中的文字元素在图片元素的前面，于是，当CSS3动画只要不是最终一瞬间的opacity: 1，位于DOM流后面的图片就会遵循“后来居上”准则，覆盖文字

解决：提高文字的层叠顺序，例如，设置z-index:1

参考：

https://www.zhangxinxu.com/wo...

https://juejin.im/post/5b876f...