[CSS] Absoluut positioneren binnen relatieve positie

[Verwijderd]

Absoluut positioneren van pagina componenten is een echte uitkomst wat mij betreft. Op die manier heb je volledige controle over waar de verschillende onderdelen komen te staan. Maar... dat lijkt alleen echt optimaal te werken, wanneer je daadwerkelijk je website volledig absoluut laat positioneren. Met andere woorden: gepositioneerd vanuit linksboven. Nu zie je dat regelmatig en ik persoonlijk vind het geen bezwaar, maar sommigen geven de voorkeur aan het centreren van de website in het midden van het scherm.

Nu heb ik een vraag met betrekking tot een combinatie van absoluut positioneren binnen een website die relatief in het midden is gepositioneerd. Ik zou graag willen weten of het mogelijk is om vanaf de (relatieve) linker bovenhoek van een zogenaamde wrapper-div (die horizontaal in het midden van het scherm is gecentreerd) de componenten BINNEN die wrapper-div absoluut te positioneren.

Is dit mogelijk en zo ja, hoe?

[Pixeldude]

Ik denk dat je dan moet gaan kijken naar het floaten van die objecten icm met een margin.

[crisp]

Verwijderd schreef op dinsdag 14 februari 2006 @ 16:01:
...
Nu heb ik een vraag met betrekking tot een combinatie van absoluut positioneren binnen een website die relatief in het midden is gepositioneerd. Ik zou graag willen weten of het mogelijk is om vanaf de (relatieve) linker bovenhoek van een zogenaamde wrapper-div (die horizontaal in het midden van het scherm is gecentreerd) de componenten BINNEN die wrapper-div absoluut te positioneren.

Is dit mogelijk en zo ja, hoe?

Ja, absolute positionering wordt gerekent vanuit een parent-element met een andere position-waarde dan 'static' en anders vanuit de root.
In jouw geval zou het toekennen van 'position:relative' aan je wrapper dus al uitkomst bieden

Overigens raad ik meestal toch aan elementen niet buiten de flow te plaatsen tenzij strict noodzakelijk

[ Voor 7% gewijzigd door crisp op 14-02-2006 16:34 ]

[cyberstalker]

Volgens mij moet dat wel kunnen, mits je wrapper-div ook absoluut gepositioneerd is.

Als je deze bijvoorbeeld een left: 50%; geeft, en een negatieve margin-left op de helft van de breedte, krijg je een gecentreerde, absoluut gepositioneerde wrapper-div.

Alle posities die je vervolgens binnen deze div geeft, zijn relatief hieraan.

[frickY]

Een object wordt absoluut gepositioneerd ten opzichte van zijn parent, indien deze relatief is gepositioneerd.

Indien je een div met een position relative op top 10px, left 10px zet.. staat deze 10 pixels vanaf de linker bovenhoek.
Indien je hierin een div nest met een position absolute op top 10px en left 10px, staat deze 20px vanaf de linker bovenhoek van het venster.. en 10px vanaf de linker bovenhoek van zijn relatieve parent.
Dus ja, wat jij wilt is prima mogelijk. Had je het nog niet geprobeerd?

[crisp]

cyberstalker schreef op dinsdag 14 februari 2006 @ 16:34:
Volgens mij moet dat wel kunnen, mits je wrapper-div ook absoluut gepositioneerd is.

Als je deze bijvoorbeeld een left: 50%; geeft, en een negatieve margin-left op de helft van de breedte, krijg je een gecentreerde, absoluut gepositioneerde wrapper-div.

Deze manier van centreren geeft meteen aan waarom ik absolute positioning juist afraadt; als je dit toepast en je scherm smal maakt zal je zien dat er een stuk content verdwijnt waar je niet meer naartoe kan scrollen

[Clay]

Centreren van block elementen kan gewoon binnen de flow met margin:0 auto; 0 is dan voor boven en onder, auto voor links en rechts. Let wel dat IE6 hiervoor in standards mode (bwaha) moet draaien, en IE5.x het nooit gaat snappen, maar daarvoor staat IE je weer toe hetzelfde te doen met text-align:center;

Verder kan je idd absolute positioneren binnen relative elementen die op hun beurt wel in de flow staan, al is dit wel meer een handige bijkomstigheid van relative dan een hoofddoel ervan. Alles absolute doen zou ik niet aanraden, juist het effectief gebruiken van zowel display types, floats als positioning voor je layout maakt de meeste dingen uitvoerbaar.

[Verwijderd]

Dank jullie zeer! Het zit hem inderdaad in het instellen van de 'wrapper'-div als relatief gepositioneerd en niet static (default).

Ik ben het er overigens mee eens dat je niet te veel absoluut moet gaan positioneren wanneer dat niet nodig is. Maar voor sommige pagina elementen is het wel enorm handig.

[BtM909]

Verwijderd schreef op dinsdag 14 februari 2006 @ 18:36:
Maar voor sommige pagina elementen is het wel enorm handig.

Geef eens een voorbeeld, want je moet eigenlijk proberen zo min mogelijk met absolute gepositioneerde elementen te werken.

[Verwijderd]

BtM909 schreef op woensdag 15 februari 2006 @ 09:42:
[...]

Geef eens een voorbeeld, want je moet eigenlijk proberen zo min mogelijk met absolute gepositioneerde elementen te werken.

Nou bijvoorbeeld een soort icoon die als het ware op een vaste plaats bovenop de algemene content ligt. Ik ben het er verder mee eens dat, wanneer het mogelijk is, je gewoon gebruik moet maken van de flow.

[Verwijderd]

Wat is er eigenlijk mis met absoluut positioneren? Waarom geniet werken volgens de standaard flow de voorkeur?

[Clay]

Omdat iets absolutes geen ruimte in die flow reserveert, en je er dus niet makkelijk iets achter of onder kan krijgen, vergeleken met het wel gebruiken van de flow. Als dat niet relevant is, is er natuurlijk niets mis mee, maar in de praktijk komen veel CSS problemen dus gewoon voort uit een verkeerde aanpak.

[ Voor 4% gewijzigd door Clay op 19-02-2006 18:18 ]