Transform 对元素渲染的影响

最新推荐文章于 2024-05-05 10:15:42 发布

原创最新推荐文章于 2024-05-05 10:15:42 发布 · 887 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #transform

前端基础专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨CSS中transform属性的三大影响：提升元素层叠顺序、限制position:fixed的窗口固定效果、改变overflow对absolute子元素的限制。通过具体实例，帮助读者理解transform属性在网页布局中的作用和潜在问题。

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 上：
right覆盖在left上
这个时候，给左边的元素设置transform：

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

！奇迹发生了——————transform可以提升元素的垂直位置：
left 在 right 上
但是，这个时候给两个元素设置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/