Comment éviter l'écart lors de l'utilisation de z-index en CSS?

J'ai le code HTML suivant:Comment éviter l'écart lors de l'utilisation de z-index en CSS?

<div class="outer_container"> 
    <div id="imgContainer"> 
     <img src="/some/image" />    
    </div> 

    <div id="slogan"> 
     <span class="quote">Some text here</span> 
    </div> 

    <div id="footer" class="gray_top_border"> 
     Some text here 
    </div> 
    </div>

Et voici mon CSS:

.outer_container { 
    background-color:#FFFFFF; 
    margin:0 auto; 
    width:960px; 
} 

#slogan { 
    font-size: 3em; 
    position: relative; 
    z-index: 999; 
    bottom: 50px; 
    left: 50px; 
} 

#footer { 
    border-top:1px solid #B5B5B5; 
    min-height:50px; 
    padding:10px; 
}

En utilisant ce code, je reçois un écart 3em entre l'image et le pied de page.
Si je change de position de relative à absolute, le problème d'écart est parti. Mais alors la position haut/gauche est relative à la fenêtre du navigateur, et non au sein du conteneur DIV.

Comment puis-je faire flotter du texte sur l'image sans créer cet espace?

Source

2010-11-10 Steven

@stevan vous avez donné slogan relatif Si oui, pourquoi les avez-vous donnés en bas et à gauche? Ce devrait être seulement pour la position: le droit absolu. – kobe

@stevan, si le pied de page veut placer 50px en bas et à gauche, vous devez placer le pied comme absolu et parent comme parent – kobe

Vous n'avez probablement pas défini la position du conteneur parent, vous devez le faire pour l'élément '# slogan' avoir l'effet désiré, s'il vous plaît poster le reste de votre CSS afin que nous puissions voir comment l'élément interagit avec les autres :) – Kyle

Cela le fait:

#slogan { 
    font-size: 3em; 
    position: relative; 
    height: 0; 
    overflow: visible; 
    z-index: 999; 
    bottom: 50px; 
    left: 50px; 
}

Source

2010-11-10 08:38:16

est-ce une bonne pratique de donner une position relative et inférieure, à gauche – kobe

Non ce n'est pas une bonne pratique, mais je répondais à la question. Le fait est que l'ajout de ces deux paramètres (hauteur et débordement) permet de supprimer l'écart, mais quelle que soit la position que vous avez prise après cela est différent. –

Merci Nathan, cela a fonctionné. Probablement pas une solution idéale, mais cela fonctionne :) – Steven

pouvez-vous essayer le ci-dessous css.

#slogan { 
     font-size: 3em; 
     position: relative; 
     z-index: 999; 
     margin-top:-20px; 

    } 

    #footer { 
position:absolute; 
bottom:10px 

     border-top:1px solid #B5B5B5; 
     min-height:50px; 
     padding:10px; 
    }

Source

2010-11-10 08:56:03 kobe

« position: relative » se réserve encore la zone du texte aurait été en Cela signifie qu'il peut faire des problèmes padding/marge étranges de temps en temps.. "Position: absolute" ne réserve pas la zone.

Je recommande simplement d'utiliser cela au lieu de pirater avec le relatif.

http://www.w3schools.com/css/css_positioning.asp

Vous pouvez envelopper le tout dans une nouvelle div qui est position: relative alors vos pixels absolus vont sortir de cette place de l'écran 0,0.

« Un élément de position absolue est positionnée par rapport au premier élément parent qui a Si aucun élément une position autre que statique. Se trouve, le bloc contenant est. »

Source

2010-11-10 09:30:49 Nicki

Comment éviter l'écart lors de l'utilisation de z-index en CSS?

Répondre

Questions connexes