变形transform的副作用
来源:互联网 发布:java类的成员变量 编辑:程序博客网 时间:2024/05/15 06:18
z-index
在定位中的堆叠z-index
中曾经提到过,CSS3的出现对过去的很多规则发出了挑战,对层叠上下文z-index的影响更加显著,其中就包括元素的变形transform
不是none的情况
元素的变形transform
不是none使该元素可以使用堆叠z-index
,从而可以覆盖普通流元素和低级别的定位元素
在下面例子中,show2和show1都是普通元素,show2通过设置margin负值,覆盖了show1。但是,通过改变show1的'transform'属性可以改变其层叠效果
fixed
固定定位fixed
使元素相对于视窗进行定位,不随着页面滚动条的滚动而滚动。但是,如果在固定定位元素的父级设置transform
不为none,则会将固定定位降级为绝对定位absolute
兼容性:IE浏览器无此表现,依然保持fixed状态
[注意]在chrome浏览器下,将固定定位元素父级的transform
属性设置为none,可能会使元素从静态位置移动到left:0、top:0的位置
overflow
对于溢出overflow
失效的情况发生在overflow在绝对定位元素及其包含块之间,如下所示
给设置overflow
的元素使用transform
或在设置overflow
的元素与溢出元素之间的元素设置transform
,可以解决overflow
失效的问题
兼容性:在chrome和safari浏览器下,只有设置overflow
的元素与溢出元素之间的元素设置transform
时,才有效;而IE9+和firefox浏览器,对于以上两种设置都有效
[注意]在chrome浏览器下,将元素的transform
属性设置为none,可能会使元素从静态位置移动到left:0、top:0的位置
定位父级
一般地,绝对定位元素设置宽度百分比时,参照的是定位父级。定位父级是第一个position值为非static值的祖先元素。但是,如果祖先元素中存在设置了transform
元素不为none的元素,也可以成为定位父级
以下为例子中的HTML结构,当.transform
元素设置transform:scale(1)
时,该元素成为定位父级,否则.parent
元素是定位父级
<div class="parent" style="position:relative;width: 200px;height: 30px;"> <div class="transform" style="width: 80px;height: 80px;"> <div class="test" style="position:absolute;width:100%"></div> </div></div>
- 变形transform的副作用
- 变形transform的副作用
- 变形transform的副作用
- transform-变形
- canvas变形方法transform的可视化演示
- CSS3 元素的变形(transform)
- transform(变形)和transform-origin(变形原点)
- transform(变形)和transform-origin(变形原点)
- transform(变形)和transform-origin(变形原点)
- transform变形和transform-origun变形原点
- transform(变形)和transform-origin(变形原点)
- CSS3中的transform变形
- Transform【变形】属性
- css3 transform 变形
- css3--变形(transform
- css3(transform变形)
- CSS3中的transform变形
- CSS3中的transform变形
- 优惠券2
- Python3 HashSet
- C++模板与数据结构
- 3DSlicer10:体系结构1
- 在你的DLL中,如何导入(导出)一个类,使得其他项目可以调用该类?
- 变形transform的副作用
- UML模型九种图
- 1 Java基础
- 1175: 矩阵转置(指针专题)
- HashMap与ConcurrentHashMap的区别
- IT 之路
- RTSP交互命令简介及过程参数描述
- mysql5.7以上版本找初始密码的方法
- jupyter快捷键