Div übereinander platzieren?

Joe Petts

Hey Leute!

Wie manche von euch sicherglich gemerkt haben bin ich Anfänger in HTML/CSS aber ich komme langsam vorran

Meine Frage wäre jetzt, ob man bestimmte <div id".."</div> auch überneinandere legen kann.

Hier ein Beispiel: http://www.bilder-space.de/bilder/da9be2-1280852270.jpg

[Blockierte Grafik: http://www.bilder-space.de/show_img.php?i…g&size=original][Blockierte Grafik: http://www.bilder-space.de/bilder/2f5f64-1280852169.jpg][Blockierte Grafik: http://www.bilder-space.de/show_img_test.…9.jpg&size=view][Blockierte Grafik: http://www.bilder-space.de/show_img_test.…9.jpg&size=view]

Dodo

http://de.selfhtml.org/css/eigenschaf…ng.htm#position

Joe Petts

ah danke sehr!

eigentlich müsste ich auf die seite auch selber kommen.. Habs blos ganz vergessen dass es die noch gibt.

Grevas

Was bei Selfhtml nicht so deutlich drin steht: z-index funktioniert nur wenn man tatsächlich eine position: xy; benutzt.
Eine default position gibt es nicht.

Pion

So gesehen braucht man auch kein Position, einfach das was drüber soll am Ende stehen im Quelletext unter dem wo es drübersoll, positioniert wird mit MARGIN und FLOATS

mfg

Joe Petts

jetzt habe ichs! danke

habe die "position:absolute;" vergessen..

Habe das jetzt so geändert:

Zitat

#boxi {
position:absolute;
margin-top:250px;
margin-left:50%;
width:200px;
height:200px;
z-index:2;
background-color:#ccf; }

Alles anzeigen

ist das in ordnung?

threadi

Nein. Du musst Dich für ein Vorgehen entscheiden.

Entweder absolute Positionierung.
Oder Außenabstands-Nutzung.

Du hast beides genutzt, was vermutlich nicht in jedem Browser das ergibt was Du dir erhoffst.

Grevas

Zitat von Pion

So gesehen braucht man auch kein Position, einfach das was drüber soll am Ende stehen im Quelletext unter dem wo es drübersoll, positioniert wird mit MARGIN und FLOATS

mfg

Bei dem vom Threadersteller vorgestellten "Problem" magst du recht haben, aber das ist ja nicht immer der Fall. Und allgemein, wenn es darüber geht, dass ein Element über einem anderen Element sein soll, muss man die Position angeben.
In manchen Fällen will man auch auf position: absolute; zugreifen, weil man nicht will, dass andere Elemente die vielleicht noch dazu kommen / eingeblendet werden das Ergebnis beeinflussen. Letztendlich will man später im Code den entsprechenden Abschnitt finden - und das dann auch an der Stelle wo er eingeblendet wird.

Wenn man überhaupt überlappungen beabsichtigt hat, sollte man sicherheitshalber z-index: 0; als default definieren. IE7 nimmt das nämlich an - dann verhält sich das ganze manchmal nicht so, wie man es gerne hätte. Ich musste zumindest schonmal 2h lang ein Container umschachteln um ihn überhaupt IE7 darstellungsfähig zu machen (es ging dabei um mehrere Ebenen).

Joe Petts

Oh man, habe die Beiträge jetzt zu spät gelesen nachdem ich schon einige Sachen mit der falschen Art gemacht habe.. Da muss wohl jeder Anfänger durch

Pion

Grevas ich brauche keine Position um eine Div über eine andere zu Positionieren

Ich mache es ohne Positions angaben weil sie nicht nötig sind sprich ich machs über "Abstands-Nutzung".

Joe Petts

Könntet ihr mir bitte einen kleinen Beispiel zeigen?

Grevas

Hier eine simple Überlappung, nach der Pion-Art.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
#show_1 { background-color: #fff; }
#show_1 div { width: 250px; height: 350px; background-color: #777; border: 1px solid #333; }
#show_1 .overlap_last { margin-top: -300px; }


#show_1 #ov_1 { background-color: blue; margin-left: 50px; }
#show_1 #ov_2 { background-color: yellow; margin-left: 100px; }
#show_1 #ov_3 { background-color: red; margin-left: 150px; }
</style>
</head>
<body>


<div id="show_1">
    <div>

    </div>
    <div id="ov_1" class="overlap_last">

    </div>
    <div id="ov_2" class="overlap_last">

    </div>
    <div id="ov_3" class="overlap_last">

    </div>
</div>


</body>
</html>

Alles anzeigen

So wie es Pion macht, geht es zwar - aber in manchen Fällen ist es ungeeignet. Z.B. was passiert wenn man 1 von diesen Div's entfernt? naaa?

Es ist alles relativ. Wenn auf einmal ein Element länger ausfällt - rutscht alles mit. Was nicht immer gewünscht wird bei Überlappungen. Und ohne Position: xy; kannst du kein z-index benutzen.

Was hat das für ein Nachteil?
Du kannst nicht per JS / CSS einfach ein Z-index ändern um etwas in den vordergrund zu bringen.

Hier das gleiche Beispiel wie oben, leicht abgeändert:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
#show_1 { background-color: #fff; }
#show_1 div { position: relative; width: 250px; height: 350px; background-color: #777; border: 1px solid #333; }
#show_1 .overlap_last { margin-top: -300px; }


#show_1 #ov_1 { background-color: blue; margin-left: 50px; }
#show_1 #ov_2 { background-color: yellow; margin-left: 100px; }
#show_1 #ov_3 { background-color: red; margin-left: 150px; }


#show_1 div:hover { z-index: 1; }
</style>
</head>
<body>


<div id="show_1">
    <div>

    </div>
    <div id="ov_1" class="overlap_last">

    </div>
    <div id="ov_2" class="overlap_last">

    </div>
    <div id="ov_3" class="overlap_last">

    </div>
</div>


</body>
</html>

Alles anzeigen

Schon hat mal ganz simple Karteikarten. Man könnte immer eine Überschrift lesen und per Hover nähere Infos zu Gesicht bekommen. So als Beispiel

/P.S. Wenn das mitrutschen nicht gewollt ist, muss man auf position: absolute; zugreifen (und die Elemente an der entsprechenden Stelle im Code packen).

Joe Petts

Jo, danke schön! Ist mir große Hilfe!

Tags