---

Jeg er ved at prøve at forstå alt det her med div, css og relativ/absolut
positionering og har et forståelsesproblem vedr. nedenstående øvelse.


http://www.html.dk/tutorials/css/lektion14.asp - relativ positionering
http://www.html.dk/tutorials/css/lektion14_eks2.asp

Jeg forstår ikke hvad nedenstående mål måles ud fra? Jeg har prøvet at måle
med en pixellineal, for at finde ud af hvorfra målene bottom: 150 px og
bottom 500 px måles ud fra, men kan ikke finde ud af det?

Jeg regner med at målene for left er 10 pixel længere inde end vinduet, men
det er jo nok p.gra. margin?
#trads {
   position:relative;
   left: 350px;
   bottom: 150px;
}
#thorsen {
   position:relative;
   left: 150px;
   bottom: 500px;
}



/Tine

---

Tine Müller wrote:

> Jeg forstår ikke hvad nedenstående mål måles ud fra?

Normal placeres et element statisk - det vil sige alt efter dets
placering i dokumentets naturlige flow ("rækkefølge").

Når noget placeres relativt, placeres det med udgangspunkt i dets
normale (statiske) placering.

> #trads {
> position:relative;
> left: 350px;
> bottom: 150px;
> }


Billedet af Trads vil derfor placeres forskudt med 350px målt fra
venstre, og 150px målt fra bunden.

> #thorsen {
> position:relative;
> left: 150px;
> bottom: 500px;
> }

Billedet af Thorsen vil placeres 150px fra venstre og 500px fra sin
oprindelige bund.

Hvis du kigger i HTML-koden, vil du da også bemærke, at de to
billeder er placeret langt fra hinanden:


<h1>Udskrift...</h1>

<p>Politidirektøren ...
<p>overtrædelse...
<p>overtrædelse...
<div id="trads"><img src="trads.jpg"></div>
<p>ved i forening...
<p>den 22. maj 1998...
<p>den 11. december...
<div id="thorsen"><img src="thorsen.jpg"></div>
<p>alt hvorved...
<p>a...
....


Og som du måske har bemærket, er der stort tomrum mellem de
tekstafsnit, hvor billederne oprindeligt var placeret. Dette skyldes
følgende:

| relative
| The box's position is calculated according to the normal flow
| (this is called the position in normal flow). Then the box is
| offset relative to its normal position. When a box B is relatively
| positioned, the position of the following box is calculated as
| though B were not offset.
^^^^^^^^^^^^^^^^^^^^^^^^

Du kan læse mere (teknisk) om positionering her:

   <http://www.w3.org/TR/CSS2/visuren.html#propdef-position>

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

"Anders Thorsen Holm" <zoolook@daimi.au.invalid> skrev
> Normal placeres et element statisk - det vil sige alt efter dets
> placering i dokumentets naturlige flow ("rækkefølge").
>
> Når noget placeres relativt, placeres det med udgangspunkt i dets
> normale (statiske) placering.
>
> > #trads {
> > position:relative;
> > left: 350px;
> > bottom: 150px;
> > }
>
>
> Billedet af Trads vil derfor placeres forskudt med 350px målt fra
> venstre, og 150px målt fra bunden.
>
> > #thorsen {
> > position:relative;
> > left: 150px;
> > bottom: 500px;
> > }
>
> Billedet af Thorsen vil placeres 150px fra venstre og 500px fra sin
> oprindelige bund.
>
> Hvis du kigger i HTML-koden, vil du da også bemærke, at de to
> billeder er placeret langt fra hinanden:
>
>
> <h1>Udskrift...</h1>
>
> <p>Politidirektøren ...
> <p>overtrædelse...
> <p>overtrædelse...
> <div id="trads"><img src="trads.jpg"></div>
> <p>ved i forening...
> <p>den 22. maj 1998...
> <p>den 11. december...
> <div id="thorsen"><img src="thorsen.jpg"></div>
> <p>alt hvorved...
> <p>a...
> ...
>
>
> Og som du måske har bemærket, er der stort tomrum mellem de
> tekstafsnit, hvor billederne oprindeligt var placeret. Dette skyldes
> følgende:
>
> | relative
> | The box's position is calculated according to the normal flow
> | (this is called the position in normal flow). Then the box is
> | offset relative to its normal position. When a box B is relatively
> | positioned, the position of the following box is calculated as
> | though B were not offset.
> ^^^^^^^^^^^^^^^^^^^^^^^^
>
> Du kan læse mere (teknisk) om positionering her:
>
> <http://www.w3.org/TR/CSS2/visuren.html#propdef-position>


Tusind tak for din flotte forklaring. Først nu forstår jeg, hvad øvelsen gik
ud på.

Jeg har bare svært ved at se, hvad/hvornår man skulle have brug for at bruge
relativ positionering efter at have læste dette indlæg, men den forståelse
kommer jo også nok en dag.

/Tine

---

Tine Müller wrote:

> Jeg har bare svært ved at se, hvad/hvornår man skulle have brug
> for at bruge relativ positionering efter at have læste dette
> indlæg, men den forståelse kommer jo også nok en dag.

Som sagt kan det benyttes til at forskyde elementerne i forhold til
hinanden - det kan udnyttes til at skabe visuelle effekter som på
eksempelsiden, du henviste til.

Hvis man f.eks. vil placere elementerne i lag (ved hjælp af z-index)
skal man også lige angive noget andet en statisik positionering.

Absolut positionering kan godt bruges, men har den ulempe, at de
dermed fjernes fuldstændig fra dokumentets flow.

Relativ positionering bevarer den information - de øvrige tager
hensyn til det relativt positionerede element og gør plads til det.

Nogle gange kan det endda være nødvendigt at sætte position: relative
på enkelte elementer, fordi Internet Explorer beklageligvis har en
fejl, der gør, at tekst og baggrunde forsvinder nærmest sporadisk.
Position: relative kan af en eller anden grund afhjælpe denne bug.

Forresten, du må meget gerne klippe i dine citater - i det her
tilfælde ved f.eks. bare at skrive [snip om relativ positionering].
Jeg troede lige, du havde skrevet et kæmpe indlæg, men det viste sig
mest at være min egen tekst

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/fona/

---

"Tine Müller" <tinem@email.dk> skrev

> Tusind tak for din flotte forklaring. Først nu forstår jeg, hvad øvelsen
gik
> ud på.
>
> Jeg har bare svært ved at se, hvad/hvornår man skulle have brug for at
bruge
> relativ positionering efter at have læste dette indlæg, men den forståelse
> kommer jo også nok en dag.

Relativ positionering kan også bruges til at definere en boks, hvori noget
skal placeres absolut. Det har den fordel, at dette noget positioneres
absolut i forhold til den relativt positionerede omgivende boks i stedet for
hele dokumentet.

Dette igen har sin fordel, hvis noget skal positioneres absolut et stykke
nede på en side og placeringen ellers vil skride i forhold til sidens øvrige
indhold, hvis browservinduet ændres væsentligt i størrelse.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin