Question

在许多网站的源代码中，我看到position:relative被添加到每个div，这使得布局并没有使用#wrapper div？

将position:relative添加到每个布局div是不错的做法？它只与IE 6有关吗？

这是css

 .header { position: relative; float: left; left: 143px; width: 977px; height: 150px; background-color: #ffff33; } 
.top-nav { position: relative; float: left; left: 143px; width: 977px; height: 30px; } 
.top-nav { margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } 
.top-nav li { float: left; } 
.top-nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px solid #ccc; } 
.top-nav li a:hover { color: #c00; background-color: #fff; } 
.wrapper { position: relative; float: left; left: 143px; width: 977px; background-color: ffffff; } 
.left { position: relative; float: left; left: 0px; width: 193px; background-color: ea0101; } 
.middle { position: relative; float: left; left: 10px; width: 551px; background-color: fff; } 
.right { position: relative; float: right; right: 0px; width: 213px; background-color: 356aa0; } 
.footer { position: relative; float: left; left: 143px; width: 977px; height: 100px; background-color: #c79810; }

Answer 1

这是我能想到的主要原因，其中涉及IE6 / 7中的一个错误。当父元素需要滚动条时，它涉及在容器外部错误溢出的元素。解决方案是将position:relative添加到父元素。也许你正在寻找的网站的所有者只是把它带到了一个疯狂的极端？

http://snook.ca/archives/html_and_css/position_relative_overflow_ie/

Answer 2

在IE 6和7中提供元素position: relative触发the mysterious hasLayout property。

触发hasLayout经常修复IE中的各种CSS问题，因此某些人盲目地将其应用于每个<div>，希望IE能够因此而出现。

真正的开发人员只在需要时才使用它。

添加位置的好处是什么：相对于每个布局元素？

2 个答案: