<- <- Tillbaka!

Nästlade lager är lite speciella. För att det ska fungera korrekt i NS måste man positionera inom head och _inte_ inom div-taggen. Observera att det kan bli oavsiktliga radbrytningar i exempelkoden.

<style type="text/css">
<!--
#foralder { position: absolute; left: 50; top: 0; width: 230; height: 120; background-color: #00ff00; layer-background-color: #00ff00 }
#barn1 { position: absolute; left: 0; top: 0; width: 70; height: 70; background-color: #000000; layer-background-color: #000000 }
#barn2 { position: absolute; left: 100; top: 25; width: 70; height: 70; background-color: #c0c0c0; layer-background-color: #c0c0c0 }
-->
</style>

Sedan inom body kodar du in föräldra-div-taggen (den yttersta) och inom dem de två barnen eller på engelska child. Observera att positioneringen av barn-div-taggarna blir i hänseende till föräldra-div-taggen.

<div id="foralder">
Föräldralagret
<div id="barn1">
Barn1
</div>
<div id="barn2">
Barn2
</div>
</div>

För att krångla till det ytterligare så kan man *klippa* lagren via clip: rect(0,50,50,0); där du kan kolla hur det blir genom att ange olika siffror inom paranteserna. Här är det en 50 pixel hög och bred fyrkant som klipps ut av lagret och resten görs osynligt. Det innebär att du kan bl.a kan öppna ett *titthål* i ett lager och bara visa den liten del av det.

Ser du ovan två nästlade lager som via position: relative har positionerats precis under den text där den är kodad i editorn. Barnlagret har *klippts* så all text som egentligen finns i det syns inte. Koden är:

<style type="text/css">
<!--
#clipforalder { position: relative; left: 5; top: 5; width: 200; height: 100; background-color: #c0c0c0; layer-background-color: #c0c0c0 }
#clipbarn { position: absolute; left: 20; top:20; width: 70; height: 70; background-color: #00ff00; layer-background-color: #00ff00; clip: rect(0,50,50,0) }
-->
</style>

Koden för lagren är
<div id="clipforalder">
<a href="javascript:hideclip()">Dölj lagret</a>
<div id="clipbarn">
En massa text i barnlagret som kommer att klippas bort då den via clip: rect(0,50,50,0); blir en fyrkant på 50 x 50.
</div>
</div>

Ännu mera överkurs :). Ska du manipulera de olika nästlade lagren via script så skiljer sig NS här oxå, varje nästlat lager betraktas som separata när det gäller document.layers och NS objektmodell.
document.foralder.document.barn1.visibility
eller om du vill nå lager 2
document.foralder.document.barn1.document.barn1.visibility
och visibility kan givetvis bytas ut mot annan egenskap.
Klicka på länken bredvid. Dölj Barn1
<a href="javascript:dolj()">Dölj Barn1</a>
scrolla upp (använd scrollisten) och se att barnlager 1 har försvunnit nu.

<script type="text/javascript" language="JavaScript">
<!--
function dolj()
{
if (document.layers)
document.foralder.document.barn1.visibility = "hide"
else if (document.all)
barn1.style.visibility = "hidden" }
//-->
</script>

<- <- Tillbaka!