Avatar billede mikmakmuk Nybegynder
16. april 2003 - 01:24 Der er 3 kommentarer og
1 løsning

placering af bokse

Hvis jeg nu har noget i den her retning, hvordan får jeg så de 2 bokse placeret uafhængigt af hinanden på skærmen, og hvordan bestemmer jeg havd der skal overlabbe hvad?

<html>
<head>

<style type="text/css">
body {
background-color: #999999;
margin-top: 0px;
margin-left: 0px;
}


.boks1{
background-color: #ffffff;
margin-top: 50px;
margin-left: 150px;
height:150px;
width:150px;
}

.boks2{
background-color: #ffffff;
margin-top:50px;
margin-left:100px;
height:100px;
width:100px;
}

</style>


</head>
<body>

<span class="boks1">boks1</span>
<span class="boks2">boks2</span>
     
     
</body>
</html>
Avatar billede bearhugx Nybegynder
16. april 2003 - 01:51 #1
.boks1 {
  position:absolute;
  left: 100px;
  top : 100px;
  width: 100px;
  height: 100px;
  z-index: 1;
}
.boks1 {
  position:absolute;
  left: 150px;
  top : 150px;
  width: 100px;
  height: 100px;
  z-index: 2;
}

Som svar på dit første spm :

  hvordan placerer du dem uafhængigt på skærmen ==
ved at positionere dem absolut
Du bruger position:absolute til at definere at du vil positionere absolut - og bruger left og top til at angive positionen....

  hvoran du får den til at overlappe hinanden ==
ved at give dem forskellig z-index
et "lag" med større z-index vil blive lagt foran andre lag med mindere z-index..

Derfor skulle boks2 gerne være den, som overlapper boks1  i ovenstående - da den har størst z-index...

/Søren
Avatar billede mikmakmuk Nybegynder
16. april 2003 - 01:54 #2
kool, men virker z-index ikke kun i IE :-)
Avatar billede bearhugx Nybegynder
16. april 2003 - 01:57 #3
nope... z-index er faktisk en del af CSS2 specifikationen
http://www.w3.org/TR/REC-CSS2/visuren.html#z-index
Avatar billede mikmakmuk Nybegynder
16. april 2003 - 01:59 #4
så er alt jo godt :-)))
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester