PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Problem mit position:relative (CSS)

Gwaihir
2010-09-25, 12:07:16
Hallo zusammen,

kennt Ihr das Phänomen, dass wenn man über CSS ein Objekt über "position:relative" verschiebt, der Platz an der eigentlischen Stelle unsichtbar trotzdem eingenommen wird?

Beispiel: Ich habe eine große Box, die fast den gesamten Browserinhalt ausfüllt. Dann kommt eine zweite kleinere Box, die der Browser eigentlich UNTER die große Box setzen würde. Ich sage aber "setze mir die Box relativ zum eigentlichen Punkt 500 Pixel höher". Dann wäre die kleine Box INNERHALB der großen Box zu sehen.

Aber: Es erscheint im Browser plötzlich ein Scrollbalken nach unten. Die kleine Box ist zwar korrent innerhalb der großen Box, aber der Browser hat den Platz, den die Box ohne das position:relativ-Element eingenommen hätte, trotzdem reserviert. Kämen da jetzt noch 5 weitere Boxen hinzu, würde der Scrollbalken noch länger...

Wieso passiert das? Und wie kann ich das vermeiden? Falls niemand eine Antwort weiß, wäre die Frage, wie ich den Scrollbalken unterdrücken kann.
Marbleearth
2010-09-25, 12:43:08
overflow:hidden sollte den Scrollbalken unterdrücken!
gentoo
2010-09-25, 13:52:24
position:relative reserviert den platz.
Nimm position:absolute und es sollte funktionieren.
Gwaihir
2010-09-25, 14:53:00
position:absolute bringt mir aber nichts bei einer horizontal zentrierten Website... die absolute Position ist je nach Bildschirmauflösung woanders. Oder bekomme ich den Nullpunkt an die (zentrierte) große Hauptbox ausgerichtet?
gentoo
2010-09-25, 15:22:58
Wenn die kleinere Box ein Kind der großen Box ist und die position
der großen Box selbst auf relative, absolute oder fixed gesetzt ist,
verhält sich die kleine Box relativ zum Vater - also genau das was du brauchst.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
#place_holder{
height:100px;
width:500px;
}
#big_box {
width:500px;
height:300px;
background-color:blue;
position:relative;
}
#small_box{
width:50px;
height:50px;
background-color:red;
position:absolute;
}



</style>
</head><body>
<div id="place_holder"></div>
<div id="big_box">
<div id="small_box"></div>
</div>

</body></html>