/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
position: absolute i div
Fra : andreas2411@gmail.co~


Dato : 16-10-07 13:23

Hej

Jeg har nogle giffer som er delvist gennemsigtige og som jeg gerne vil
lægge ovenpå hinanden. De har alle samme størrelse og følgende virker
som jeg gerne vil i både IE og Firefox:

<div style="width: 256px; height: 256px;">
<img src="img1.gif" style="position: absolute;">
<img src="img2.gif" style="position: absolute;">
<img src="img3.gif" style="position: absolute;">
</div>

Det burde jo sådan set gøre mig glad, men problemet er at jeg ikke
helt forstår hvorfor det virker. Hvis jeg sætter top: 0px; og left:
0px; for billederne bliver de flyttet til øverste venstre hjørne af
browservinduet. Som jeg forstår dette: http://www.w3.org/TR/CSS21/visuren..html#choose-position
burde det give samme resultat som hvis jeg udelader værdierne. Hvad
foregår der her?

/Andreas


 
 
andreas2411@gmail.co~ (16-10-2007)
Kommentar
Fra : andreas2411@gmail.co~


Dato : 16-10-07 13:25

On Oct 16, 2:22 pm, andreas2...@gmail.com wrote:
> Jeg har nogle giffer som er delvist gennemsigtige og som jeg gerne vil
> lægge ovenpå hinanden. De har alle samme størrelse og følgende virker
> som jeg gerne vil i både IE og Firefox:
>
> <div style="width: 256px; height: 256px;">
> <img src="img1.gif" style="position: absolute;">
> <img src="img2.gif" style="position: absolute;">
> <img src="img3.gif" style="position: absolute;">
> </div>
>
> Det burde jo sådan set gøre mig glad, men problemet er at jeg ikke
> helt forstår hvorfor det virker. Hvis jeg sætter top: 0px; og left:
> 0px; for billederne bliver de flyttet til øverste venstre hjørne af
> browservinduet. Som jeg forstår dette:http://www.w3.org/TR/CSS21/visuren.html#choose-position
> burde det give samme resultat som hvis jeg udelader værdierne. Hvad
> foregår der her?

Ok hvis jeg skriver top: y; left: x; bliver billederne faktisk
positioneret i forhold til diven - det er åbenbart "px" der ødelægger
det. Betyder "px" i forhold til browservinduet?

/Andreas


Birger (16-10-2007)
Kommentar
Fra : Birger


Dato : 16-10-07 14:30

<andreas2411@gmail.com> skrev i en meddelelse
news:1192537528.302981.144480@v23g2000prn.googlegroups.com...
On Oct 16, 2:22 pm, andreas2...@gmail.com wrote:
> Jeg har nogle giffer som er delvist gennemsigtige og som jeg gerne vil
> lægge ovenpå hinanden. De har alle samme størrelse og følgende virker
> som jeg gerne vil i både IE og Firefox:
>
> <div style="width: 256px; height: 256px;">
> <img src="img1.gif" style="position: absolute;">
> <img src="img2.gif" style="position: absolute;">
> <img src="img3.gif" style="position: absolute;">
> </div>
>
> Det burde jo sådan set gøre mig glad, men problemet er at jeg ikke
> helt forstår hvorfor det virker. Hvis jeg sætter top: 0px; og left:
> 0px; for billederne bliver de flyttet til øverste venstre hjørne af
> browservinduet. Som jeg forstår
> dette:http://www.w3.org/TR/CSS21/visuren.html#choose-position
> burde det give samme resultat som hvis jeg udelader værdierne. Hvad
> foregår der her?

> Ok hvis jeg skriver top: y; left: x; bliver billederne faktisk
> positioneret i forhold til diven - det er åbenbart "px" der ødelægger
> det. Betyder "px" i forhold til browservinduet?



px er en enhed der betyder pixels, og top og left (og alle andre css
parametre) skal altid have en enhed sammen med en størrelse (px, pt, em, %
.....).
position:absolute; piller elementet ud af sammenhængen (det normale flow) og
du skal positionere dem i forhold til vinduet (body).
Man kan sætte absolut positionerede inden i absolut positionerede - det
indeni bliver så positioneret i forhold til det udenom.

Hvis man ikke angiver position, bruger nogle browsere stadig positionen i
forhold til normalt flow. Så hvis du ikke giver en placering, ved du reelt
ikke hvor dine elementer visses..

For at anbringe dine billeder oven på hinanden, vil jeg foreslå dig, at
bruge position:relative i stedet:
<img src="img1.gif">
<img src="img2.gif" style="position: relative; left;">
<img src="img3.gif" style="position: relative; left;">
hvor X er bredden af billedet.

Det er svært at designe med position : absolute.

Birger



Jørgen Farum Jensen (16-10-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 16-10-07 16:35

Birger skrev:
> <andreas2411@gmail.com> skrev i en meddelelse
> news:1192537528.302981.144480@v23g2000prn.googlegroups.com...
> On Oct 16, 2:22 pm, andreas2...@gmail.com wrote:
>> Jeg har nogle giffer som er delvist gennemsigtige og som jeg gerne vil
>> lægge ovenpå hinanden. De har alle samme størrelse og følgende virker
>> som jeg gerne vil i både IE og Firefox:
>>
>> <div style="width: 256px; height: 256px;">
>> <img src="img1.gif" style="position: absolute;">
>> <img src="img2.gif" style="position: absolute;">
>> <img src="img3.gif" style="position: absolute;">
>> </div>

> For at anbringe dine billeder oven på hinanden, vil jeg foreslå dig, at
> bruge position:relative i stedet:
> <img src="img1.gif">
> <img src="img2.gif" style="position: relative; left;">
> <img src="img3.gif" style="position: relative; left;">
> hvor X er bredden af billedet.
>
> Det er svært at designe med position : absolute.

Enig - men så er det heller ikke værre. Den
fornuftige løsning på Birgers problem er
i mine øjne:

<div id="pixbox">
<img src="img1.gif">
<img src="img1.gif">
<img src="img1.gif">
</div>

med følgende stylesheet:

#pixbox {
position:relative;
width:256px;
height:256px;}
#pixbox img {
position:absolute;
left:0
top:0;
width:256px;
height:256px;
border:none;}


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

Birger (17-10-2007)
Kommentar
Fra : Birger


Dato : 17-10-07 01:41

"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> skrev i en meddelelse
news:4714da18$0$2096$edfadb0f@dtext02.news.tele.dk...
8X
> Enig - men så er det heller ikke værre. Den
> fornuftige løsning på Birgers problem er
> i mine øjne:
8X

Nu var det så ikke mig der havde problemet - men i øvrigt er jeg helt enig
;>)

Birger



Jørgen Farum Jensen (17-10-2007)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 17-10-07 11:25

Birger skrev:

> Nu var det så ikke mig der havde problemet - men i øvrigt er jeg helt enig

Ups og undskyld!

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

andreas2411@gmail.co~ (17-10-2007)
Kommentar
Fra : andreas2411@gmail.co~


Dato : 17-10-07 06:12

On 17 Okt., 02:41, "Birger" <s...@bbsorensen.com> wrote:
> "Jørgen Farum Jensen" <jfjen...@yahoo.dk> skrev i en meddelelsenews:4714da18$0$2096$edfadb0f@dtext02.news.tele.dk...
> 8X> Enig - men så er det heller ikke værre. Den
> > fornuftige løsning på Birgers problem er
> > i mine øjne:
>
> 8X
>
> Nu var det så ikke mig der havde problemet - men i øvrigt er jeg helt enig
> ;>)
>
> Birger

Super! Tak til jer begge.

--
Andreas


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste