Transform 对元素渲染的影响

CSS 的 transfrom 属性真的让人又爱又恨,虽然功能挺不错,但有些情况下,还是常常对页面产生莫名其妙的影响。

给自己来一个技术总结,沉淀一下。

1. Transfrom 提升元素层叠顺序

当元素未设置floatposition都为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 上:
right覆盖在left上
这个时候,给左边的元素设置transform

.left {
  transform: translate(0, 0); // +
}

奇迹发生了——————transform可以提升元素的垂直位置:
left 在 right 上
但是,这个时候给两个元素设置opacity会发生什么呢?

.left, .right {
  opacity: .8; // +
}

这两个元素的堆叠层级恢复了(只给 right 设置opacity结果也一样):
在这里插入图片描述
opacity可以恢复因transform对元素造成的层级(按渲染顺序的层级)变化。当然,给元素设置positionz-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/

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值