z-index déclenché pour les éléments flottants

Question

Je me suis battu avec un problème d'index z sur un projet et une chose que j'ai remarquée est que les navigateurs modernes vont déclencher un comportement d'index z sur les éléments qui flottent, ainsi que sur les éléments avoir une position: relative ou absolue. Cela semble contredire les spécifications du W3C qui stipule:

:

est ici un test "applique aux éléments de la 'position' propriété de type 'absolu' ou 'relative'.":

CSS:

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-top:-1px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    } 
p.tabHolder { 
    overflow: hidden; 
    height: 1%; 
    margin: 14px 0 0px 0; 
} 
p.tabHolder a { 
    display: block; 
    margin:0 2px 0 0; 
    padding: 6px 11px; 
    float: left; 
    background: #eee; 
    border:1px solid #bbb; 
} 
p.tabHolder a.active { 
    background-color: #fff; 
    border-bottom-width:0px; 
    color:#333; 
    padding-top: 7px; 
    z-index: 100; 
} 

HTML:

 <p class="tabHolder"> 
     <a class="active" href="#">Foo</a> 
     <a href="#">Bar</a> 
    </p> 
    <div id="tabContent"> 
     <p>Lorem ipsum</p> 
    </div> 

Si vous chargez cela dans IE8 et basculez le bouton d'affichage de compatibilité, vous verrez que dans IE8, l'index z fonctionne, mais pas dans IE-7.

Quelqu'un peut-il expliquer cela?

Answer 1

Les navigateurs sont conformes aux normes dans une certaine mesure et varient même selon les spécifications des normes auxquelles ils sont conformes. En outre, les navigateurs ont certains ensembles de fonctionnalités qui leur sont propres et ne font partie d'aucune norme W3C. C'est pourquoi lors du développement pour le web, vous devez tester sur un navigateur très ciblé.

Answer 2

Peut-être que je l'ai mal compris la question, mais si vous remplacez vos règles de style pour #tabContent avec

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    width:80px; 
    margin-top:-10px; 
    z-index:50; 
    float:left; 
} 

ou

#tabContent{ 
    border:1px solid #ccc; 
    padding:15px; 
    margin-bottom: 1.5em; 
    background: #fff; 
    width:80px; 
    margin-top:-10px; 
    z-index:50; 
    position:absolute; 
    top:10px; 
    left:20px; 
} 

alors vous verrez des boîtes se chevauchent qui se comportent comme si .active n'a pas d'index z, qui est le même dans tous les navigateurs.