Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

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

  通常情况下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度只是个例子,换成其它变换也无妨。

  测试于:
    Chrome 31.0.1650.63 m
    Firefox 26
    IE 11
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^