CSS 的
transfrom
属性真的让人又爱又恨,虽然功能挺不错,但有些情况下,还是常常对页面产生莫名其妙的影响。给自己来一个技术总结,沉淀一下。
1. Transfrom 提升元素层叠顺序
当元素未设置
float
、position
都为static
的情况下,遇到重叠被覆盖的时候,给被覆盖的元素设置transform
样式,被覆盖的元素层级会被提升,但是会受opacity
属性的影响。
来看看 HTML 结构:
<div class="left"></div>
<div class="right"></div>
在相同的堆叠上下文中,元素的层级按渲染顺序展示,后渲染的元素会在上面。
.left, .right {
display: inline-block;
width: 200px;
vertical-align: middle;
}
.left {
height: 120px;
background-color: #8ed7ff;
}
.right {
height: 100px;
background-color: pink;
}
这个时候在页面上的效果是,right 覆盖在了 left 上:
这个时候,给左边的元素设置transform
:
.left {
transform: translate(0, 0); // +
}
!奇迹发生了——————transform
可以提升元素的垂直位置:
但是,这个时候给两个元素设置opacity
会发生什么呢?
.left, .right {
opacity: .8; // +
}
!这两个元素的堆叠层级恢复了(只给 right 设置opacity
结果也一样):
opacity
可以恢复因transform
对元素造成的层级(按渲染顺序的层级)变化。当然,给元素设置position
和z-index
也可以达到同样的效果。
2. Transform 限制 position: fixed 的窗口固定
设置了
transform
元素使得子元素的position:fixed
窗口固定效果变成position: absolute
。
HTML 结构:
<div class="container">
<div class="child"></div>
</div>
一般来说,设置了position: fixed
的元素都能根据窗口固定:
.container{
height: 200vh;
.child {
width: 250px;
height: 250px;
background-color: pink;
position: fixed;
top: calc(50vh - 125px);
right: calc(50vw - 125px);
}
}
这个时候,child 会脱离父元素的文本流,无论页面如何滚动,它都固定在窗口的中间。
!但是当父元素设置了transform
,它的fixed
就失效了,和absolute
时候的效果一样,会随着窗口滚动了。
3. Transform 改变 overflow 对 absolute 子元素的限制
来看下 HTML 结构:
<div class="container">
<div class="child"></div>
</div>
当容器设置了溢出隐藏,其子元素溢出容器的部分自然会被隐藏,但是当子元素设置了绝对定位,脱离了正常文本流,在正常文本流中的位置不再存在,容器的溢出隐藏对这个绝对定位的子元素就没有用了(当然,容器设置相对定位的情况另谈)。
.container {
width: 200px;
height: 200px;
overflow: hidden; // 父元素隐藏
border: blue;
.child {
width: 250px;
height: 250px;
background: pink;
position: absolute; // 子元素绝对定位
}
}
此时页面上渲染出来的效果是这样的:
当容器设置了transform
属性,这个时候overflow: hidden
对这个绝对定位的子元素就生效了。
.container {
transform: translate(0, 0); // +
}
此时页面上,子元素溢出容器的部分就被隐藏了:
有人可能会想,设一设z-index
就回去了吧? 然而不能,无论子元素的层级设多高,都是一样的结果。
你以为就这样结束了吗? 在支持transform
属性的 IE 浏览器上会出问题!设置了translate(0, 0)
的容器会认为是没设,只有当其值不为全0的时候,溢出隐藏才会生效。那怎么办?为了视觉上没差,我使用translate3d(0, 0, 1px)
对垂直于屏幕的方向设置值,这样就不是全 0 的值了,IE 上的子元素又能继续隐藏了。
给出本文的参考链接:https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/