[CSS] Positioning quirk of by design?

[F.West98]

Goedenacht

Ik was een beetje aan het fiddlen voor een verticaal en horizontaal gecentreerde dynamische div, en ik kwam erachter dat dit heel goed werkt:

Cascading Stylesheet:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Maar, als je die dan in een parent plaatst en hem relative maakt, heb je ineens een translateY van -75% nodig, ipv -50%. Anders is 'ie inderdaad te laag.
Fiddle: http://jsfiddle.net/p5Ckp/4/ (gewoon de position van relative naar absolute veranderen)

Heeft iemand een verklaring voor dit fenomeen?

[Room42]

Hij is niet te laag, zet maar eens een border: 1px solid red; op de .dialog

http://jsfiddle.net/p5Ckp/5/

[ Voor 17% gewijzigd door Room42 op 01-06-2014 03:59 ]

[Biersteker]

F.West98 schreef op zondag 01 juni 2014 @ 03:28:
Goedenacht

Ik was een beetje aan het fiddlen voor een verticaal en horizontaal gecentreerde dynamische div, en ik kwam erachter dat dit heel goed werkt:

Cascading Stylesheet:

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Maar, als je die dan in een parent plaatst en hem relative maakt, heb je ineens een translateY van -75% nodig, ipv -50%. Anders is 'ie inderdaad te laag.
Fiddle: http://jsfiddle.net/p5Ckp/4/ (gewoon de position van relative naar absolute veranderen)

Heeft iemand een verklaring voor dit fenomeen?

http://jsfiddle.net/RVYFz/2/
Lijkt me vrij inherent aan het gebruik van absolute en het niet resizen van je frame, en height van 300px van .parent)

edit; hmz ik kijk er nu nog eens naar, maar volgens mij was ik niet helemaal wakker. gister.

[ Voor 8% gewijzigd door Biersteker op 01-06-2014 13:35 ]

[F.West98]

Room42 schreef op zondag 01 juni 2014 @ 03:40:
Hij is niet te laag, zet maar eens een border: 1px solid red; op de .dialog

http://jsfiddle.net/p5Ckp/5/

Wut.. Waarom is bij position: relative de grootte anders

[incaz]

Bij position: relative wordt formaat en positie bepaald door wat je zou krijgen als het in de normale flow zit. Dat is dus je div.parent.

Bij absolute wordt het element uit de flow getrokken, en worden maten en posities berekend ten opzichte van of de eerste parent die een position: relative of absolute heeft, of ten opzichte van je window. In dit geval is dat het voorbeeldframe van jsfiddle.

Als je position: relative op je div.parent zet krijg je wel hetzelfde resultaat, op wat gedoe met de box-sizing na (margins en borders worden meegerekend in de maten.)

[F.West98]

Aha. Enorm logisch van CSS ook weer

Wat wel grappig is, is dat Firefox met die translate niet rekening houdt met de autocomplete boxes

[MoietyMe]

Vergeet ook niet je prefixes te zetten voor bijvoorbeeld IE9; mocht je dat nog willen ondersteunen.

Sowieso altijd handig om even de ondersteuning van bepaalde propperties te bekijken.

[F.West98]

Visual Studio maakt die al voor jou aan