Каково преимущество добавления позиции: относительно каждого элемента макета?

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

Предоставление элемента position: relative триггеров Загадочное hasLayout свойство в IE 6 и 7.

Запуск hasLayout часто исправляет различные проблемы CSS в IE, поэтому некоторые люди слепо применяют его к каждому <div> в надежде, что IE будет вести себя в результате.

Реальные разработчики используют его только тогда, когда это необходимо.

Answer 2

Это основная причина, по которой я могу придумать, которая связана с ошибкой в ​​IE6 / 7. Это вовлекает элементы, неправильно переполняющиеся вне их контейнеров, когда родительский элемент требует полосы прокрутки. Решение состоит в том, чтобы добавить position:relative к родительскому элементу. Возможно, владельцы сайтов, на которые вы смотрите, просто довели это до безумного экстрима?

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