CSS3的变换对定位参照的影响

2023-12-27    分类： 网站建设

通常情况下fixed定位的元素都是相对于文档的。即使fixed定位的元素所在的容器是relative、absolute，甚至也是一个fixed定义的，内部的fixed定位元素依然不受其影响，直接相对于文档。但在一些特殊情况下fixed的参照对象确实可以发生改变。 下面这个测试是让fixed定义的元素分别呆在absolute、relative、fixed中 运行<style> body {margin:0px;} body>div { width:50px;height:50px;left:30px;top:30px; border:1px solid red; } body>div:nth-child(1) {position:absolute;} body>div:nth-child(2) {position:relative;} body>div:nth-child(3) {position:fixed;} body>div>div { position:fixed;border:1px solid blue; width:10px;height:10px;left:10px;top:10px; } </style> <body> <div><div></div></div> <div><div></div></div> <div><div></div></div> </body>

结果很明显，fixed总是相对于文档的。通常情况下就是这样了，但CSS3中引入了新特性，这些新特新就可能影响到fixed定位的参照。现在我们对fixed定位的元素所在的容器做一个CSS3的变换如何？比如旋转0度 运行<style> body {margin:0px;} body>div { width:50px;height:50px;margin:30px; border:1px solid red; -webkit-transform:rotate(0deg); transform:rotate(0deg); } body>div>div { position:fixed;border:1px solid blue; width:10px;height:10px;left:10px;top:10px; } </style> <div><div></div></div>

只有IE暂未支持这个特性，Chrome和Firefox都已经支持了。当如果把上面测试中的fixed改为absolute就全都能兼容。这就意味着，CSS3的变换可以改变其子元素的定位参照物。即使position是static的容器，只要做了变换就都可以作为子元素定位的参照对象。上面的旋转0度只是个例子，换成其它变换也无妨。

文章题目：CSS3的变换对定位参照的影响
转载来于：https://www.cdcxhl.com/news25/310625.html

成都网站建设公司_创新互联，为您提供电子商务、建站公司、外贸网站建设、搜索引擎优化、网站维护、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设

网站建设知识

同城分类信息