DIV schiebt sich übers andere DIV

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe eine Seite, die in 2 Bereiche aufgeteilt ist. Der obere Bereich ist für den Inhalt da.

Der untere DIV ist der Footer in dem Copyright usw… stehen soll.

Jetzt habe ich das Problem, wenn ich die Website in der Höhe verkleiner schiebt sich irgendwann das untere div über das obere. Wie kann ich das verhindern?

Mein Code:

<html>
<body>

<div id="a" style="background-color:yellow; width:600px; height:700px; position:absolute;"></div>
<div id="b" style="background-color:orange; width:600px; bottom:0px;position:absolute; left: 20px;margin:0px; padding:0px;"></div>

</body>
</html>
2

Da deine Divs absolute positionietr sind ändern sie ihre Position nicht. Es empfiehlt sich in den meistens Fällen sowieso nicht mit absoluten Elementen zu arbeiten.
Du kannst die Elemente mit margin psoitionieren. Dafür schau dir mal das CSS Box Modell an.
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
Hoffe das hilft dir etwas :slight_smile:

3

Wie Gilles sagte, das liegt an der position:absolute Variante.
Durch das absolute positionieren deiner div’s nimmst du diese aus dem viewport heraus ( sprich aus dem Dokumentenfluss).
Absolute positionierungen empfehlen sich jenachdem bei verschachtelten Elementen die vorher auch mit position definiert worden sind.

4

Moin,

absolut positionierte Elemente sehen sich gegenseitig nicht und alle anderen Elemente tun so, als wären die abs. Elemente nicht da.

Bei Positionsangaben orientieren sie sich an body, außer der Containing Block des absoluten Elements hat position:relative;.
Dann orientiert sich das abs. Element bei seinen Positionsangaben daran. :wink: