Problème étrange de nitpicky avec positionnement relatif CSS

J'ai remarqué un problème inhabituel aujourd'hui en jetant ensemble une page de type "en construction" rapide où je déplace un texte sur une image en utilisant un positionnement relatif. (Cette page a été « inspiré » par la page en mode hors connexion de SO, si vous vous souciez)Problème étrange de nitpicky avec positionnement relatif CSS

<html> 
    <head> 
    <title>Bronco Marching Band</title> 
    </head> 
    <body style="background-color: #888;"> 
    <div style="text-align: center;"> 
     <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" 
     title="The Bronco Band website is down for a major upgrade. Please check back later." 
     style="width: 620px; height: 465px; opacity: 0.8;" /> 
     <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;"> 
     PLEASE STAND BY 
     </div> 
    </div> 
    </body> 
</html>

Il semble que la zone où la div position relative autrefois prend encore l'espace. c'est-à-dire qu'il laisse des espaces en dessous de l'image où la div serait si elle n'était pas positionnée.

Y a-t-il un moyen de contourner ce problème?

Source

2009-04-24 Alex S

Pour référence future: Indentez votre code à quatre places, et il ne sera pas rendu dans le poste ou l'aperçu. – Shog9

Les éléments en position relative occupent toujours de l'espace. Vous voulez réellement un élément absolument positionné ... vous voulez juste qu'il soit positionné absolument par rapport au conteneur!

<div style="text-align: center;position:relative; zoom: 1;"> 
    <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" title="The Bronco Band website is down for a major upgrade. Please check back later." style="width: 620px; height: 465px; opacity: 0.8;" /> 
    <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center"> 
    PLEASE STAND BY 
    </div> 
</div>

changements clés:

Container div a position: relative style défini
enfant a div ensemble position: absolute de style, l'amenant à être placé à des coordonnées absolues au sein du parent.
Position I par rapport au sommet du parent, et positionner div sur toute la largeur pour permettre à text-align: center de fonctionner.

Edit: Pour IE6 à positionner correctement, je l'ai utilisé un hack pour forcer la mise en page pour le conteneur DIV: le style zoom: 1. Si vous n'avez pas besoin de prendre en charge IE6, vous pouvez omettre cela.

Testé: FF3, IE6, Chrome1, Chromium2

Démo: http://jsbin.com/uqisa

Source

2009-04-25 00:03:35 Shog9

Plutôt que ceci:

position: relative; 
top: -300px;

Essayez ceci:

margin-top: -300px;

Sur une note séparée, dans votre balise <img />, vous devez également modifier ceci:

width="799px" height="600px"

à cette :

width="799" height="600"

Source

2009-04-25 00:02:23

Oups, j'ai oublié de prendre la largeur/hauteur. Je gère cela en CSS plus tard. –

Problème étrange de nitpicky avec positionnement relatif CSS

Répondre

Questions connexes