Container aufeinander schieben

hoctar

Erfahrenes Mitglied
Hi :)

ich möchte gerne das "Value" unter "Name" angeziegt wird. Mit dem folgenden Code ist das leider umgekehrt:

Code:
<style type="text/css">
<!--

    div {
    
        float: left;
        padding: 4px;
        border: 1px solid green;

    }

    #a {

        background-color: #ccc;

    }
    
    #b {

        margin-left: -10px;
        background-color: #999;

    }

//-->
</style>

<div id="a">Name</div>
<div id="b">Value</div>
 
HTML:
<style type="text/css">
<!--
 
    div {
    
        padding: 4px;
        border: 1px solid green;
 
    }
 
    #a {
 
        background-color: #ccc;
 
    }
    
    #b {
 
        background-color: #999;
 
    }
 
//-->
</style>
 
<div id="a">Name</div>

Ist doch ganz normal wenn du beide div's float:left , zuteilts.
 
Die beiden DIVs sollen sich um 10px überlappen, deswegen teile ich beiden float left zu, um die container links-bündig aufzureihen.
 
wie überlappen vetikal oder horizontal? wobei , wenn horizontal dann sind die jo nicht wieder untereinandern, evtl könntest du dich anders ausdrücken , so versteh ich's leider nicht sorry
 
ich möchte gerne das "Value" unter "Name" angeziegt wird. Mit dem folgenden Code ist das leider umgekehrt
Deine gewünschte umgekehrte Anzeige der Container in ihrer voreingestellten Schichtposition (der im HTML-Code zuletzt genannte überlappt den vorherigen) regelst du mit Hilfe von z-index - hier gilt: je höher der Wert, desto weiter vorne / oben befindet sich das Element (siehe http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index).

position:relative dient in dem CSS, damit z-index auch greift, da diese Eigenschaft nur in Verbindung mit der position-Eigenschaft (absolute, relative, fixed) funktioniert.

CSS:
div {
    float: left;
    padding: 4px;
    border: 1px solid green;
    position:relative;
}
#a {
   background-color: #ccc;
   z-index:2;
}
#b {
   margin-left: -10px;
   background-color: #999;
   z-index:1;
}
 
Zuletzt bearbeitet:
Zurück