transform对普通元素的渲染影响
来源:互联网 发布:最新域名地址紧急跳转 编辑:程序博客网 时间:2024/06/05 09:14
transform对普通元素的渲染影响
1、transform改变overflow对absolute元素的限制
absolute绝对定位元素,如果含有overflow不为visible的父类元素,同时该父级元素以及到该绝对定位元素之间任何嵌套元素都没有position为非static的属性,则overflow对该absolute元素不起作用。”
例如下面的代码:<p style="width:200px;height:300px;overflow:hidden;"><img src="images/1.jpg" alt="" style="position:absolute"></p>overflow对img元素不起作用,展示结果如下:
但是如果在父元素(或者它们之间嵌套的元素)中设置:transform:scale(1);或tranform:translate(0,0);则能够使overflow发挥作用,增加transform后显示结果如下:
2、transform限制absolute的100%宽度大小
当我们设置absolute元素的宽度为100%时,都要参照第一个position为非static的元素,但是现在设置了transform的元素也要被认为是position设置为非static的元素了。看下面的代码:div没有设置transoform之前:
<div style="width:300px;height:300px;overflow:hidden;"><img src="images/1.jpg" alt="" style="position:absolute" width="100%"></div>显示结果如下:
div设置transform之后的显示结果如下:
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>
显示结果如下:
可以说transform使得元素具有pisition:relative的特性了。
4、transform会影响position:fixed元素的滚动效果。
当给元素设置position:fixed时元素不会随着窗口滚动,但是如果给元素的父级元素(注意不是给元素本身设置)transform属性,那么元素便会随着窗口的滚动而滚动。
0 0
- transform对普通元素的渲染影响
- CSS3 transform对普通元素的N多渲染影响
- CSS3 transform对普通元素的N多渲染影响
- CSS3 transform对普通元素的N多渲染影响
- 关于CSS3中transform属性对元素布局的影响。
- 渲染性能:读写style对渲染过程的影响
- 【初级-个人理解】float是否脱离普通流?是否占据空间?以及浮动对内联和块元素的影响。
- 负margin对元素高度的影响
- javascript的加载、解析、执行对浏览器渲染的影响
- stage.invalidate()、event.updateAfterEvent()对渲染的影响
- float对内联元素和块元素的影响
- 旋转会对unity中物体的transform.forward的值产生影响
- CSS的float属性对周围元素位置的影响
- flash,activex对resizable,draggable元素的影响及解决方法
- css_取消float对后面元素造成的影响
- selenium2.0—iframe对元素定位的影响
- float浮动不清楚对块状元素的影响
- 谈谈padding对块级元素宽度的影响
- camera摄像原理之二:色彩空间
- 社説 20150521 党首討論 抑止力向上の議論を深めたい
- Android开发性能优化大总结
- 反病毒工具入门系列-楔子
- QT--QString
- transform对普通元素的渲染影响
- 日经春秋 20150521
- tag 值的用法
- 游标
- ORA-00600: 内部错误代码, 参数: [kcratr1_lastbwr]
- 常用layout组件细节积累
- 彻底解决Android 拍照 内存溢出 Out of Memory的问题
- Cordova移动开发之环境搭建(Windows/MAC)
- Android 控件逐渐出现,逐渐消失的动画