relatives Positionieren
isabel
- css
Liebe Leute,
mal wieder streß mit CSS. Ich will geren das das blaue Div sich automatisch unterr das gelbe Div ,setzt und dachte, das das mit relativer Positioniereung geht??
So wie ich das mache aber nicht?
Wer kann mir helfen?
Grüße
ISabel
<html>
<head>
<style type="text/css">
<!--
.green{position:absolute; border:1px solid black; width:500px; height:500px; background-color:green;}
.top { position:absolute; top:100px; left:200px; width:200px; height:100px;background-color: yellow;}
.blue{ position:relative; height:100px; width:100px; border:1px solid black; background-color: blue;}
-->
</style>
</head>
<body>
<div class="green">
<div class="top">
</div>
<div class="blue">
</div>
</div>
</body>
</html>
Hallo isabel
mal wieder streß mit CSS. Ich will geren das das blaue Div sich automatisch unterr das gelbe Div ,setzt und dachte, das das mit relativer Positioniereung geht??
So wie ich das mache aber nicht?
position:relative bedeutet nur, dass das Element relativ zu _seiner_ Ausgangsposition platziert wird.
.green{position:absolute; border:1px solid black; width:500px; height:500px; background-color:green;}
.top { position:absolute; top:100px; left:200px; width:200px; height:100px;background-color: yellow;}
.blue{ position:relative; height:100px; width:100px; border:1px solid black; background-color: blue;}
[...]
<div class="green">
<div class="top"></div>
<div class="blue"></div>
</div>
Da du ja das gelbe DIV-Element absolut positionierst und auch seine Höhe auch festgelegt ist, kannst du doch auch das blaue DIV-Element absolut positionieren:
position:absolute; top:200px; left:200px;
Einfach nur den Abstand zum oberen Rand und die höhe des gelben DIVs addieren.
Schöne Grüße
Johannes
Ne leider, nicht so einfach,
Das blaue Element soll sich immer direkt unter das gelbe setzten egal wie groß das gelbe ist. Es ist für einen allgmeinen Aufbau, indem sich die höehe des gelben Elements verändern kann!
Sagt Dir das was?
lg
Isabel
Hi,
Das blaue Element soll sich immer direkt unter das gelbe setzten egal wie groß das gelbe ist. Es ist für einen allgmeinen Aufbau, indem sich die höehe des gelben Elements verändern kann!
Dann mußt Du entweder ein div um das blaue + gelbe rumlegen und dieses neue div positionieren
oder aber das gelbe ins blaue packen und dann an dessen Unterkante ausrichten (top:100% sollte klappen, hab es aber nicht getestet...)
oder darauf hoffen, daß jemand noch ne andere Idee hat... ;-)
cu,
Andreas
Hi,
oder aber das gelbe ins blaue packen und dann an dessen Unterkante ausrichten (top:100% sollte klappen, hab es aber nicht getestet...)
sorry, umgekehrt, das blaue ins gelbe und das blaue per top ausrichten...
cu,
Andreas