Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:
> Offset-markørerne kan kun bruges til at markere et startpunkt for
> boksen - ikke til at markere bredde eller højde. Derfor kan man fx
> ikke skrive "top: 10px; bottom: 10px;" - og få en boks der er
> placeret 10px inde i det omgivende element. Højde og bredde
> bestemmes af width og height.
Jo, det kan man faktisk.
Det man opgiver er
left offset
margin left
border left
padding left
width
padding right
border right
margin right
right offset
Disse skal tilsammen give bredden af det omgivende element. Alle disse
har en værdi givet ved CSS og cascading, den værdi kan for offsets og
width være "auto" (det er endda default).
Hvis kun en af disse tre er auto, så bliver dens værdi sat så det kommer
til at passe, også hvis det er width.
Prøv følgende:
<div style="width:400px;height:400px;position:relative;border:1px solid black;">
<div style="position:absolute;left:100px;right:100px;top:100px;bottom:100px;border:1px solid red"> </div>
</div>
> Z-indekset bestemmer hvilket element der ligger øverst. Jo højere
> z-værdi, desto længere fremme ligger et element.
Her skal man ogsa passe på, fordi et element med højere angivet
z-index kan godt blive placeret bag et med lavere.
Hvert element med en angivet z-index starter et nyt "stacking context",
hvor alle børn bliver placeret i forhold til.
Eksempel (hvis vi kun kigger på z-index):
<div style="z-index:3">
<div style="z-index:10"></div>
</div>
<div style="z-index:5"></div>
Ligegyldigt hvordan man placerer div'erne, så vil den første være
under den tredje (lavere z-index og placeret i samme context). Den
anden har højere z-index end den tredje, men det z-index er *kun* i
forhold til den omkrandsende div, og den anden div bliver også placeret
under den tredje.
Fuldt eksempel:
---
<style type="text/css">
div {
width:100px;
height:100px;
border-width:5px;
border-style:solid;
position:absolute;
}
#div1 {z-index:3; border-color:blue; top:0px; left:0px;}
#div2 {z-index:10;border-color:green; top:20px;left:20pxs;}
#div3 {z-index:5 ;border-color:red; top:50px;left:50px;}
#div4 {z-index:2 ;border-color:red; top:20px;left:20px;}
#div5 {z-index:1 ;border-color:purple; top:20px;left:20px;}
</style>
....
<div id="div1">
<div id="div2">Z:3.10</div>
Z:3
</div>
<div id="div3">
<div id="div4">
<div id="div5">Z:5.2.1</div>
Z:5.2
</div>
Z:5
</div>
---
/L
--
Lasse Reichstein Nielsen - lrn@brics.dk
Ph.D. i datalogi søger stilling som software-udvikler i Øst- eller
Nordjylland. Curriculum Vitae: <URL:
http://www.brics.dk/~lrn/cv.html>