Quelle est la position d'ajout des avantages: par rapport à chaque élément de mise en page?

Question

dans le code source de nombreux sites Web j'ai vu position:relative est ajouté à chaque div qui rend la mise en page et aucun # diviseur utilisé?

Est-ce une bonne pratique d'ajouter position:relative à chaque mise en page div? Est-ce lié à IE 6 seulement?

c'est 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

C'est la principale raison pour laquelle je peux penser, ce qui implique un bug dans IE6/7. Cela implique des éléments débordant de manière incorrecte en dehors de leurs conteneurs lorsqu'un élément parent requiert une barre de défilement. La solution consiste à ajouter position:relative à l'élément parent. Peut-être que les propriétaires des sites Web que vous regardez l'ont pris à un extrême fou?

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

Answer 2

Donner un élément position: relative déclenche the mysterious hasLayout property dans IE 6 et 7.

Déclencher hasLayout résout souvent divers problèmes CSS dans Internet Explorer, de sorte certaines personnes appliquer aveuglément à tous les <div> dans l'espoir que IE se comportera en conséquence.

Real Les développeurs ne l'utilisent que lorsqu'ils en ont besoin.