position: absolute i forhold til hvad?

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15
position: absolute i forhold til hvad?

Indlæg af wbie » 11. jan 2016, 12:27

Hvis et element med 'position: absolute' ligger i en upositioneret body (altså body har 'position: static'), hvad placeres elementet så i forhold til?

Det er jo ikke body, skal det være det, skal body have en anden position.
Det er heller heller ikke skærmen, i så fald skulle den jo blive fikseret, da skærmen ikke scrolles.

Det må på en el. anden måde være bodys parent - html? Eller har body et canvas, det ligger i?

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: position: absolute i forhold til hvad?

Indlæg af cristian » 11. jan 2016, 20:55

Test test test. Prøv følgende

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
background-color: blue;
width: 100%;
height: 100vh;
}

body > div:FIRST-CHILD {
position: absolute;
top: 50%;
right: 50%;
background-color: red;
}

body > div:LAST-CHILD {
position: absolute;
top: 53%;
right: 40%;
background-color: green;
}
</style>
</head>

<body>
<div>
<p>Jeg er relativ i forhold til min parent</p>
</div>
<div>
<p>Jeg er også relativ i forhold til min parent og ignorer den røde</p>
</div>
</body>
</html>

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: position: absolute i forhold til hvad?

Indlæg af wbie » 11. jan 2016, 22:39

Jeg ved ikke lige hvor du vil hen med det, men jeg er kommet til at tænke på, at det måske ikke fra w3's side er defineret hvad den placerers i forhold til når den ligger i en static body, så måske er det meget browserafhængigt.

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: position: absolute i forhold til hvad?

Indlæg af jepperask » 11. jan 2016, 23:06

"You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself."

https://css-tricks.com/absolute-relativ ... ey-differ/

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: position: absolute i forhold til hvad?

Indlæg af wbie » 12. jan 2016, 12:03

Super! Jeg takker.
Jeg fandt i øvrigt også ':root'-selectoren, som netop skulle repræsentere 'html'-elementet :)

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: position: absolute i forhold til hvad?

Indlæg af cristian » 14. jan 2016, 00:00

wbie skrev:Jeg ved ikke lige hvor du vil hen med det, men jeg er kommet til at tænke på, at det måske ikke fra w3's side er defineret hvad den placerers i forhold til når den ligger i en static body, så måske er det meget browserafhængigt.
Det lignede at du var i tvivl om position: så jeg gav et eksempel.

W3schools skriver også hvad position: absolute placers i forhold til
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

wbie
Begynder
Indlæg:8
Tilmeldt:1. dec 2015, 20:15

Re: position: absolute i forhold til hvad?

Indlæg af wbie » 14. jan 2016, 15:18

Ok, det stemmer jo meget godt overens med jepperasks citat.

Besvar