Anzeigebeispiel: So sieht's aus
CSS
div { border:1px solid #888; }
#se1 { width:150px; height:35px; }
#se2 { width:150px; height:35px; }
#re3 { width:150px; height:35px; position:relative; top:5px; left:25px; background-color:#dfd; }
#se4 { width:150px; height:35px; }
#se5 { width:150px; height:35px; }
#re6 { width:150px; height:35px; position:relative; top:-15px; left:10px; background-color:#fdd; }
#se7 { width:150px; height:35px; }
#se8 { width:150px; height:35px; }
#as1 { position:absolute; top:35px; left:240px; width:150px; height:150px; z-index:1; background-color:#ddf; }
#as2 { position:absolute; top:90px; left:230px; width:120px; height:70px; z-index:2; background-color:#ccf; }
#as3 { position:absolute; top:220px; left:200px; width:250px; height:250px; z-index:3; background-color:#ffa; }
#as4 { position:absolute; top:20px; left:20px; width:70px; height:70px; z-index:1; background-color:#ff5; }
#as5 { position:absolute; top:20px; right:20px; width:70px; height:70px; z-index:2; background-color:#dd2; }
#as6 { position:absolute; top:130px; left:-50px; width:190px; height:70px; z-index:-1; background-color:#fdd; }
#as7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px; background-color:#fdd; }
#fs1 { position:fixed; top:45px; left:430px; width:150px; height:150px; background-color:#afa; }
HTML
<div id="se1">se1 static</div> <div id="se2">se2 static</div> <div id="re3">re3 relative</div> <div id="se4">se4 static</div> <div id="se5">se5 static</div> <div id="re6">re6 relative</div> <div id="se7">se7 static</div> <div id="as1">as1 absolute</div> <div id="as2">as2 absolute</div> <div id="as3">as3 absolute <div id="as4">as4 absolute</div> <div id="as5">as5 absolute</div> <div id="as6">as6 absolute</div> </div> <div id="as7">a7 absolute</div> <div id="fs1">fs1 fixed</div>
Mit der CSS Eigenschaft position wird die Art der Positionierung definiert. Es gib folgende Wertzuweisungen.
static = ist die Standarpositionierung, das Element liegt an der Stelle im Elementfluss, wo es notiert ist. Eine Positionierung mit top, left, right, bottom ist nicht möglich.
relative = relative Positionierung verhält sich grundsätzlich wie static, jedoch ist es hier möglich einen Versatz oder eine Verschiebung von der Normalposition anzugeben.
absolute = Das Element wird gemessen vom Rand es Vorfahrenelements positioniert, dass nicht static ist oder es wird am Viewport oder Browserfensters positioniert. Es scrollt mit, aber es wird von den anderen Elementen nicht erkannt.
fixed = Es wird, gemessen am "Viewport" oder am Browserfenster positioniert und scrollt nicht mit. Es wird von den anderen Elemten ignoriert.
sticky = (Kein Beispiel auf dieser Seite) Es liegt im Elementfluss, und scrollt mit. Wenn es die Position erreicht hat, die man mit top, left, bottom oder right angegeben hat, bleibt es an der Stelle stehen. Wenn es innerhalb eines Elternelements ist und dieses über die spezifizierte Position hinausbewegt, scrollt es weiter.