HOME -> CSS_TUTORIAL -> css-15 Tirsdag, 22. august 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
Offentliggjort 2002 - Opdateret n/a

CSS lektion 15

Lektionen handler om positionering af emner på siden!

Følgende positionerings muligheder beskrives i denne lektion:
  • Absolute position & Relative position
  • Z-index
  • Float
  • Afsluttende eksempel

Absolute position & Relative position
"Position" egenskaben beskriver hvordan du kan positionere dit element. Metoden du anvender kan enten være "relative" eller "absolute".

Absolute position beregnes ud fra øverste venstre hjørne af det element det befinder sig i.

Relative position beregnes ud fra elementets nuværende position. Elementet kan efter placering forskydes relativt i forhold til denne position.

I CSS2 sammenhæng bliver positionering beregnet ud fra et rektangulært boks princip. W3C anvender begrebet "containing block", det vil med andre ord sige, har man via absolute position placeret et element i sit dokument, så kan dette element igen agere som "containing block" for efterfølgende elementer og så fremdeles.
Absolute positionering tager udgangspunkt i øverste venstre hjørne af dokumentet (elementet), og ved den absolute positionerings model vil et element blive placeret (forskudt) i forhold til det element som den befinder sig i.

Følgende værdier er mulig at anvende i forbindelse med 'position':
top | bottom | left | right


Eksempel: Absolute positionering.
I eksemplet har jeg placeret et element (id="2") inde i et andet element (id="1").


<html>
<head>
<title>Absolute positionering</title>
</head>
<body>
<div style="position: absolute; top: 50px;
width: 100px; height: 100px; border: 1px solid red;">Boks id 1


<div style="position:absolute; top: 10; left: 110;
width: 100px; height: 100px; border: 1px solid green;">Boks id 2</div>

</div>
</body>
</html>


Body elementet indeholder elementerne div id 1 og 2, og kan dermed siges at være "containing block" for disse to elementer. Div id 1 er yderlige "containing block" for elementet div id 2.


Vis som eksempel

Eksempel: Relativ positionering.
Jeg har valgt at anskueliggøre relativ positionering med følgende lille eksempel.

Vi har et ønske om at placere to bokse ved siden af hinanden med en afstand på 5px imellem boksene.

For overskuelighedens skyld har jeg valgt at placere stylesheet i selve dokumentet. Jeg laver to bokse ved hjælp af nedenfor stående kode.


<html>
<head>
<title>Relativ positionering</title>
</head>
<body>
<div style="width: 100px; height: 100px; border: 1px solid red;">Boks 1</div>
<div style="width: 100px; height: 100px; border: 1px solid blue;">Boks 2</div>
</body>
</html>


De to bokse kommer til at se ud som følgende, ingen mystik i dette.

Ved hjælp af position relative ønsker jeg nu at placere boksene ved siden af hinanden. Koden er som nedenfor.


<html>
<head>
<title>Relativ positionering</title>
</head>
<body>
<div style="width: 100px; height: 100px; border: 1px solid red;">Boks 1</div>
<div style="position: relative; top: 0px; left: 105px; width: 100px; height: 100px; border: 1px solid blue;">Boks 2</div>
</body>
</html>


De to bokse kommer nu til at se ud som følgende, hvad er der sket? Boks 2 blev ikke flyttet til top 0px og left 105px. Boksen blev ikke flyttet på y-aksen, men 105px på x-aksen. Den er blevet flyttet relativt i forhold til sin oprindelige position.

For at placere boksene ved siden af hinanden med relativ positionering skal x/y koordinaterne angives som nedenfor vist.


<html>
<head>
<title>Relativ positionering</title>
</head>
<body>
<div style="width: 100px; height: 100px; border: 1px solid red;">Boks 1</div>
<div style="position: relative; top: -100px; left: 105px; width: 100px; height: 100px; border: 1px solid blue;">Boks 2</div>
</body>
</html>


Nu er de to bokse placeret ved siden af hinanden med 5px mellemrum.

Z-index
Ved hjælp af z-index har du mulighed for at positionere dine elementer ovenpå hinanden på forskellige lag! Til dette kan du anvende positive eller negative heltal som 1, 2, 5, -2. Når du anvender heltal har du mulighed for at styre placeringen selv. Det er også mulighed for at anvende 'auto', her vil efterfølgende definerede elementer bliver lagt ovenpå de elementer som blev defineret forinden. Nul (0) er udgangspunktet. Elementer defineret med et høj tal vil blive placeret ovenpå elementer med et lavere tal.
Float
Float egenskaben beskriver hvor elementet skal flyde! Her kan man anvende værdier som 'left', 'right' og 'none'. Ved at anvende float er det derfor mulig at placere to <p> tags i en og samme linie, en der flyder til højre og en der flyder til venstre.


p.left {
width: 40%;
float: left;
}
p.right {
width: 200px;
float: right;
}

/* Gemmes som float1.css */



<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="float1.css" />
</head>
<body>
<p class="left">Venstre float. - De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
<p class="right">Højre float. - De tryllebundne tilskuere, Carters medhjælpere og de to andre anatomiprofessorer der var blevet tilkald for at foretage en undersøgelse af mumien, kunne ikke ....</p>
</body>
</html>




Vis som eksempel

Her et eksempel med et billede der flyder til venstre.


#maleri {
float: left;
}

/* Gemmes som float2.css */



<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="float2.css" />
</head>
<body>
<div id="maleri"><img src="maleri.jpg" width="60px" alt="maleri" /></div>
<p>De tryllebundne tilskuere, Carters medhjælpere<br />og de to andre anatomiprofessorer der var blevet<br />tilkald for at foretage en undersøgelse af mumien,<br />kunne ikke .... bla bla bla .... De tryllebundne tilskuere,<br />Carters medhjælpere og de to andre anatomiprofessorer<br />der var blevet tilkald for at foretage en undersøgelse af mumien,<br />kunne ikke ....</p>
</body>
</html>




Vis som eksempel

Afsluttende eksempel

#boks1 {
text-align: center;
color: green;
background: red;
padding: 5px;
border: 1px solid navy;
position:absolute;
top:10px;
left:10px;
width:150px;
height:150px;
z-index:0;
}
#boks2 {
text-align: center;
color: green;
background: yellow;
padding: 5px;
border: 1px solid navy;
position:absolute;
top:40px;
left:110px;
width:250px;
height:150px;
z-index:-1;
}
#boks3 {
text-align: center;
color: green;
background: orange;
padding: 5px;
border: 1px solid navy;
position:absolute;
top:100px;
left:80px;
width:130px;
height:130px;
z-index:1;
}

/* Gemmes som position.css */



<html>
<head>
<title>Positionering</title>
<link rel="stylesheet" type="text/css" href="position.css" />
</head>
<body>
<div id="boks1">boks1<br />z-index 0</div>
<div id="boks2">boks2<br />z-index -1</div>
<div id="boks3">boks3<br />z-index 1</div>
</body>
</html>




Vis som eksempel

 

Mums, næste lektion handler om 'user interface', her kan du læse lidt omkring 'cursor'.

USER INTERFACE >>

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top