怪异模式下absolutely在IE6/7中的Bug

最新推荐文章于 2025-11-29 11:13:27 发布

原创最新推荐文章于 2025-11-29 11:13:27 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #css #div

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了CSS中绝对定位元素的行为，特别是当其父元素为静态定位时的表现。通过一个具体的HTML示例，展示了如何解决绝对定位元素相对于body而非预期的父元素定位的问题。

绝对定位的元素其偏移量是相对于 absolute或者relative元素的,如果父元素是static,则继续寻找父父的元素是否是absolute或者relative的,直到body为止
示例里面父元素是static的,所以应该是相对于body定位的...

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <mce:style></mce:style><style mce_bogus="1"> *{ margin:0px; padding:0px; } #d30{ height:100px; } #d01{ background:red; width:500px; height:500px; overflow:hidden; position:static; } #d01 #d02{ background:yellow; width:200px; height:200px; position:absolute; top:100px; } </style> </head> <body> <div id="d30"></div> <div id="d01"> <div id="d02"></div> </div> </body> </html>

可以看到d02的位置相对于父元素d01,而不是body,去掉d01的overflow:hidden;后正常,或者加dtd,在标准模式下也正常！

建议大家尽量加doctype，标准模式下css正常发挥作用。