Odd peinlich Problem mit CSS relative Positionierung

Ich bemerkte ein ungewöhnliches Problem heute beim Zusammenwerfen einer schnellen "unter Konstruktion" Typ Seite, wo ich Text auf ein Bild mit relativer Positionierung bewegen. (Diese Seite wurde „inspiriert“ von SO offline Seite, wenn Sie sich interessieren)Odd peinlich Problem mit CSS relative Positionierung

<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>

Es scheint zu sein, dass der Bereich, in dem die relativ positioniert div verwendet werden immer noch Platz wegnimmt. d. h. es wird Leerraum unter dem Bild gelassen, wo das div wäre, wenn es nicht positioniert wäre.

Gibt es einen Weg um dies zu umgehen?

Quelle

2009-04-24 Alex S

Für die Zukunft: nur Ihren Code vier Leerzeichen einrücken, und es wird nicht in der Post oder in der Vorschau gerendert werden. – Shog9

Relativ positionierte Elemente nehmen immer noch Platz in Anspruch. Sie wollen eigentlich ein absolut positioniertes Element ... Sie möchten es nur absolut relativ zum Container positionieren!

<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>

Wesentliche Änderungen:

Container div hat position: relative Stil gesetzt
Kind divposition: absolute Stil gesetzt hat, so dass es in absoluten Koordinaten positioniert werden innerhalb des übergeordneten.
Ich Position relativ zum oberen Rand des Elternteils, und machen Sie die Position div volle Breite, damit text-align: center funktionieren.

Edit: Damit IE6 korrekt zu positionieren, habe ich einen Hack verwendet Layout zu zwingen für den Container DIV: der zoom: 1 Stil. Wenn Sie IE6 nicht unterstützen müssen, können Sie dies weglassen.

Geprüft: FF3, IE6, Chrome1, Chromium2

Demo: http://jsbin.com/uqisa

Quelle

2009-04-25 00:03:35 Shog9

Anstatt dies:

position: relative; 
top: -300px;

Try this:

margin-top: -300px;

Auf einem separaten Notiz, in Ihrem <img /> Tag, sollten Sie auch das ändern:

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

dazu :

width="799" height="600"

Quelle

2009-04-25 00:02:23

Hoppla, vergessen Sie, die Breite/Höhe herauszunehmen. Das schaffe ich später in CSS. –

Odd peinlich Problem mit CSS relative Positionierung

Antwort

Verwandte Themen