✔ Einen DIV über einen anderen DIV positionieren

protuner

protuner

Mitglied
Hallo !

Ich spiele das erste mal mit DIV`s rum.
Nun gelingt es mir nicht das innerhalb eines DIV enthaltene DIV`s in ihre Position vertauschen.
Gut möglich das es gar nicht geht.
Ich sitze jedenfalls schon Stunden und probiere rum, belese mich, versuche es erneut und bekomm es nicht hin.
Möchte erst mal wissen ob es geht, sonnst hat sich meine Variantenidee damit schon verabschiedet.

HTML: 
#content{ background: #09C;width: 200px;float: left;}
#box1 {background: #3C9;}
#box2 {background: #669;} 
#box3 {background: #9CC;} 
</style>
</head>

<div id="content">
	<div id="box1">
        <p>
        BOX1 - div id box 1 Im Quellcode OBEN, in der Anzeige OBEN
        </p>
    </div> 
	<div id="box2">
        <p>
        BOX2 - div id box 2 Im Quellcode in der MITTE, in der Anzeige UNTEN
        </p>
    </div> 
<div id="box3">
        <p>
       BOX3 - div id box 3 Im Quellcode in der UNTEN, in der Anzeige MITTE
       </p>
</div>
</div>
<body>
</body>

Ich möchte mit Hilfe von CSS erreichen das die BOX2 den Platz mit BOX3 Tauscht ohne im HTML-Code rumzufummeln.
 
Zuletzt bearbeitet:
Moin,

grundsätzlich ist dies mit absoluten Positionsangaben (top,bottom) möglich, die die Blöcke aus dem normalen Textfluß nehmen - also beispielsweise:
CSS: 
#content{ background: #09C;width: 200px;float: left; position:relative; min-height:220px;}
#box1 {background: #3C9; position:absolute; top:0; width:100%;}
#box2 {background: #669; position:absolute; bottom:0; width:100%;}
#box3 {background: #9CC; position:absolute; top:75px; width:100%;}
div p {margin:0; padding:0;}

Der Haken daran: die Boxen verharren im Textfluß, sprich sie werden jetzt nicht mehr nach unten verschoben, wenn in der Vorgängerbox der Inhalt zunimmt, und es kommt zu sog. "Überlappungen" der Boxen in der Schichtposition.

mfg Maik
 
Danke.
So Funktioniert es.
Ich würde mit festen Größen arbeiten in dem Bereich wo ich das vor habe.

Finde es sehr schwierig zu begreifen welche Elemente ich einsetzen muss um ans Ziel zu kommen.
min-height oder div p wäre mir jetzt nicht eingefallen.
Hoffentlich kommt das mit etwas Erfahrung und bin dann nicht auf den Notnagel Forum angewiesen.

Danke noch mal Maik.
Jetzt kann ich mit freiem Kopf mein Bergtraining mit dem Rennrad machen und schaue mir nachher einmal an ob ich das für meine Webseite umsetzen kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück