transform对普通元素的渲染影响

ゝ一世哀愁。 2022-08-08 13:52 246阅读 0赞

##  ##

# transform对普通元素的渲染影响 #

## 1、transform改变overflow对absolute元素的限制 ##

## absolute绝对定位元素，如果含有overflow不为visible的父类元素，同时该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static的属性，则overflow对该absolute元素不起作用。” ##

例如下面的代码：

overflow对img元素不起作用，展示结果如下：

## ![Center][]      但是如果在父元素（或者它们之间嵌套的元素）中设置:transform:scale(1);或tranform:translate（0,0）；则能够使overflow发挥作用，增加transform后显示结果如下： ##

## ![Center 1][]       ##

## 2、transform限制absolute的100%宽度大小 ##

当我们设置absolute元素的宽度为100%时，都要参照第一个position为非static的元素，但是现在设置了transform的元素也要被认为是position设置为非static的元素了。看下面的代码：  
div没有设置transoform之前：

显示结果如下：

## ![Center 2][]   div设置transform之后的显示结果如下： ##

## ![Center 3][]    ##

## 3、transform可以改变元素的叠加顺序 ##

## 负值margin可以使后面的元素覆盖掉前面的元素（前面的元素没有设置position为非static的值），代码如下： ##

## `<span style="font-size:10px;font-weight: normal;"><div style=" width:700px;height:400px;overflow:hidden;"> <img src="images/1.jpg" alt="" style="" width="250px" height="300px"> <img style="margin-left:-90px" src="images/p1.jpg" alt="" width="300px" height="300px"> </div></span>`  显示结果如下： ##

![Center 4][]

但是如果给被覆盖的元素增加position:relative或者transform样式,元素的覆盖顺序正好相反了，显示结果如下：

## ![Center 5][]   可以说transform使得元素具有pisition:relative的特性了。    ##

## 4、transform会影响position:fixed元素的滚动效果。 ##

## 当给元素设置position:fixed时元素不会随着窗口滚动，但是如果给元素的父级元素（注意不是给元素本身设置）transform属性，那么元素便会随着窗口的滚动而滚动。    ##

[Center]: /images/20220805/dc7b97e76c0e4ec2866d3773553e4e4d.png
[Center 1]: /images/20220805/0faef91e66864ee7b3be3a0ec5b99e4a.png
[Center 2]: /images/20220805/82d91186df2e4b30b47f53d7c04e36e4.png
[Center 3]: /images/20220805/03d314bd0f1346f6884af35c063a550c.png
[Center 4]: /images/20220805/5e96362dfd044568b467f3510c0eb458.png
[Center 5]: /images/20220805/05c441c52e5f46008d641fdc9ad9f6e0.png