CSS position: relative

Beitrag von **_player** » 25.02.2011, 17:05

Hallo Leute,
ich sitze jetzt schon ein paar Stunden und suche nach einer Lösung für folgendes Problem:

Ich habe ein DIV (Übergeordnet) in dem drei weitere gleichgroße DIV (height: 200px) liegen.
Diese drei DIV sollen alle übereinander liegen. Das tun diese auch! Ich mache es mit position: relative.

Allerdings wird das übergeordnete DIV auf 600px aufgerissen, obwohl die Höhe insgesamt ja nur 200px sein soll. Das möchte ich gern verhindern!!!

Habe den Quellcode mal raus genommen zum testen und mit border versehen damit man es besser sieht.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div&#123;
        border&#58; 1px solid #0261ae;
        &#125;
#div1&#123;
        height&#58; 200px;
        border&#58; 1px solid #0261ae;
        &#125;
#div2&#123;
        position&#58; relative;
        top&#58; -200px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
#div3&#123;
        position&#58; relative;
        top&#58; -400px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
</style>
</head>
<body>
<div id="eltern-div">
 <div id="div1">DIV 1</div>
 <div id="div2">DIV 2</div>
 <div id="div3">DIV 3</div>
</div>
</body>
</html>

Wenn jemand helfen kann bitte posten. Danke

von **Anzeige von ABAKUS** »

SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002

persönliche Betreuung
individuelle Beratung
kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.

Beitrag von **celtic** » 25.02.2011, 17:36

#eltern-div{
height: 200px;
border: 1px solid #0261ae;
}

meinst Du so?

Beitrag von **_player** » 26.02.2011, 08:28

celtic hat geschrieben:#eltern-div{
height: 200px;
border: 1px solid #0261ae;
}

meinst Du so?

Nein!

Alle drei DIV haben eine Höhe von 200px und liegen übereinander!

Trotzdem wird das Eltern-DIV automatisch 600px groß, hat also einen "Leerraum" von genau 400px.

Das Beispiel was ich gepostet habe kann man auch so testen, dann sieht man es genau!

Beitrag von **Tapetum** » 26.02.2011, 10:05

Dass das Etlern-DIV 600px hoch wird ist normal, da im Rendering die Höhenberechnung vor der relativen Positionierung erfolgt. Was celtic meint war:

Wenn deine Kinder alle 200px hoch sind, warum gibst du dem Eltern-DIV dann nicht auch eine feste Höhe von 200px?

Beitrag von **xoni** » 26.02.2011, 10:08

Code: Alles auswählen

<style type="text/css">
#eltern-div&#123;
        height&#58; 200px;
        position&#58; absolute;
        border&#58; 1px solid #0261ae;
        &#125;
#div1&#123;
        position&#58; relative;
        height&#58; 200px;
        border&#58; 1px solid #0261ae;
        &#125;
#div2&#123;
        position&#58; relative;
        top&#58; -200px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
#div3&#123;
        position&#58; relative;
        top&#58; -400px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
</style>

also, so gehts bei mir.
Wenn Du mit position relative/absolute arbeitest,
musst Du die Cascade beachten, also die Elternelemente
ebenfalls mit absolute/relative versorgen.

https://www.css4you.de/position.html

Beitrag von **_player** » 26.02.2011, 11:07

xoni hat geschrieben:also, so gehts bei mir.
Wenn Du mit position relative/absolute arbeitest,
musst Du die Cascade beachten, also die Elternelemente
ebenfalls mit absolute/relative versorgen.

https://www.css4you.de/position.html

Bei dir geht es weil du dem Eltern-DIV auch eine Feste Größe zuweist. Das will ich nicht, denn...

Tapetum hat geschrieben:Dass das Etlern-DIV 600px hoch wird ist normal, da im Rendering die Höhenberechnung vor der relativen Positionierung erfolgt. Was celtic meint war:

Wenn deine Kinder alle 200px hoch sind, warum gibst du dem Eltern-DIV dann nicht auch eine feste Höhe von 200px?

Im Eltern-DIV folgt nach den drei 200px DIV noch Inhalt!
Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.

Beispiel:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div&#123;
        border&#58; 1px solid #0261ae;
        &#125;
#div1&#123;
        position&#58; relative;
        height&#58; 200px;
        border&#58; 1px solid #0261ae;
        &#125;
#div2&#123;
        position&#58; relative;
        top&#58; -200px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
#div3&#123;
        position&#58; relative;
        top&#58; -400px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
</style>
</head>
<body>
<div id="eltern-div">
 <div id="div1">DIV 1</div>
 <div id="div2">DIV 2</div>
 <div id="div3">DIV 3</div>
 Hier soll ja auch noch Inhalt folgen! Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.
</div>
</body>
</html>

Hier steht nun aber der weitere Inhalt eben die 400px weiter unten und es gibt eine 400px Lücke.

Beitrag von **Tapetum** » 26.02.2011, 11:46

Dann baust du halt noch ein DIV drumherum um DIV 1-3 zu wrappen. Machs dir doch nicht schwerer als nötig!

Beitrag von **_player** » 26.02.2011, 12:55

Tapetum hat geschrieben:Dann baust du halt noch ein DIV drumherum um DIV 1-3 zu wrappen. Machs dir doch nicht schwerer als nötig!

Oh je, manchmal sieht man den Wald vor lauter Bäumen nicht... Danke das ist natürlich die Lösung

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#eltern-div&#123;
        border&#58; 1px solid #0261ae;
        &#125;

#wrapper-div&#123;
        height&#58; 200px;
        &#125;

#div1&#123;
        position&#58; relative;
        height&#58; 200px;
        border&#58; 1px solid #0261ae;
        &#125;
#div2&#123;
        position&#58; relative;
        top&#58; -200px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
#div3&#123;
        position&#58; relative;
        top&#58; -400px;
        height&#58; 200px;
        left&#58; 0px;
        border&#58; 1px solid #0261ae;
        &#125;
</style>
</head>
<body>
<div id="eltern-div">
 <div id="wrapper-div">
  <div id="div1">DIV 1</div>
  <div id="div2">DIV 2</div>
  <div id="div3">DIV 3</div>
 </div>
 Hier soll ja auch noch Inhalt folgen! Deshalb kann ich dem Eltern-DIV keine feste Höhe zuweisen.
</div>
</body>
</html>