Notifikationer

Markér alle som læst Log ud

johan.o Nybegynder

16. november 2005 - 22:05 Der er 6 kommentarer og
1 løsning

position static og relative

Jeg fortsætter mit togt mod indsigt :)

<style>
.eks1 { position: static; }

.eks2 { position: relative; }
</style>

Ud over at jeg på elementer med klassen .eks2 er istand til at flytte disse elementer offset er der så nogen forskel på de to properties ? Bl.a. med hensyn til dokument flow, container creation.

Mvh. Johan

Synes godt om

fennec Nybegynder

17. november 2005 - 08:33 #1

Ikke mig bekendt :o)

Der er desuden et eks på MSDN som viser forskellen på de 3 position typer:
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/position.htm

Synes godt om

roenving Novice

17. november 2005 - 10:07 #2

Hvorfor spørger du ikke index.css ?-)

http://blooberry.com/indexdot/css/properties/classify/position.htm svarer præcist på dine spørgsmål !-)

Synes godt om

johan.o Nybegynder

17. november 2005 - 15:21 #3

Har kigget på link's og læst w3c's standarder og har ikke rigtigt kunne finde ud af hvorfor følgende opførsel opstår :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
</head>

<body>

<div style="position: static; width: 200px; height: 200px; margin: 0 auto; border: 1px solid #FF0000;">Red
<div style="position: absolute; left: 80px; top: 90px; border: 1px solid #00FF00;">Green</div>
</div>

<div style="position: relative; width: 200px; height: 200px; margin: 0 auto; border: 1px solid #0000FF;">Blue
<div style="position: absolute; left: 80px; top: 90px; border: 1px solid #000000;">Black</div>
</div>

</body>
</html>

Ovenstående tegner to centrerede <div>'s. Den øverste er position: static; den nederste er position: relative. Efter hvad jeg kan læse om disse properties så er den eneste forskel at den relative kan placeres offset, men hvorfor placeres de to <div>'s jeg har lavet inde i de to containers så i forhold til hvert sit reference punkt.

Inde i den relativ placerede container placeres et absolute placeret element sig i forhold til øverste venstre hjørne af den omkrandsende container.

Inde i den static placerede container placeres det absolute placerede element sig i forhold til <body> eller <html> taget - altså øverste venstre hjørne.

Nu skal jeg lige ind og se om der er noget beskrevet om dette under position: absolute; men jeg syntes da umiddelbart det er en adfærd der knytter sig til de omkrandsende elementer.

Mvh. Johan

Synes godt om

johan.o Nybegynder

17. november 2005 - 15:55 #4

Nå nu har jeg læst mig igennem w3c's position scheme om bl.a. containing blocks og det har ikke rigtigt gjort det klart hvorfor der er forskel.

position: static; og position: relative; laver begge to en containing block som kan indeholde andre relativt eller static positionerede elementer. Men der er ikke beskrevet hvorfor indeholdte absolute positionerede elementer behandles forskelligt......

Mvh. Johan

Synes godt om

fennec Nybegynder

17. november 2005 - 16:09 #5

"absolute" elementer bliver stadig placeret ud fra parent elementet.
Hvis parent elementet er placeret "static", har det IKKE nogen offset værdi, og så bliver elementet placeret ud fra 0,0. Er parent elementet der imod placeret "relativ", har det en offset værdi, og elementet bliver placeret ud fra denne position.

Hvis du har flere parent som er både "static" og relative, skal jeg ikke kunne udtale mig om hvordan den så placere sig, men jeg vil gætte på den første "relative" parent.

Ikke en vidre god forklaring, men jeg håber du forstår den :o)

Synes godt om

johan.o Nybegynder

17. november 2005 - 16:47 #6

Aha, altså :

static
The box is a normal box, _LAID_ out according to the normal flow.
relative
The box's position is _CALCULATED_ according to the normal flow (this is called the position in normal flow).

Derved opstår forskellen, den ene er PLACERET i flowet uden nogen reel left eller top værdier, derved kan man jo ikke positionerer absolut inde i denne box, da der ikke er skabt et koordinatsæt (anker). Den anden er der UDREGNET en POSITION som så kan bruges som 'anker' for absolut positionerede elementer. Det lyder jo fornuftigt nok, jeg syntes måske bare godt at det kunne være beskrevet lidt bedre :)

Tak for hjælpen til jer begge - smid et svar fennec da du fik tiøren til at falde :)

Mvh. Johan

Synes godt om

fennec Nybegynder

18. november 2005 - 08:29 #7

.o) <-- One Eyed Jack

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS