Relative Positioning (using % values instead of PX)

Hey everyone,

Reaching out because I am sometimes unable to use % values when positioning my content. It’s my understanding that I can use relative positioning with flexbox positioned elements to create a custom, offset responsive design. Does anyone have any insight as to why I cannot use % when relative positioning elements inside of flexbox positioned divs.


Here is my public share link: LINK

Which elements are you referring to?

Hey Samliew, I’m referring to elements that have been placed inside a content div as flex children. After they become flex children I’m often unable to position them vertically using % values while I can do this horizontally.

Relative position means an offset from the position that the element will be positioned initially. So it seems confusing because (relative) doesn’t work the way you intend to (absolute).

So I should really be positioning my small number of flex children absolutely as I want them positioned relatively to the parent?

No no no. That’s not what relative position means.

There is no such thing as position relatively to the parent.

Relative means relative offset to it’s own original displayed position.

If you want to position an element within a parent, it has to be absolute. Absolute will take the position of the nearest parent that isn’t auto positioned. If no parents have either relative, absolute, or fixed position, then it will bubble up to be absolute positioned from the body.

You CAN use a % or px (or any other unit) value, but you have to understand what the above means first.

Dude, thanks so much for this, that’s what I meant but you just said it way better and more understandable. After checking some of my elements were auto positioned so my flex children were bubbling up. Basiclally, I was mixing positioning methods and not checking my parent elements.

That’s right. An easier way is to think of “relative” position as a nudge tool. You want to nudge this element 50px from it’s original position, or nudge it 50% (of the parent’s height) from it’s original position.

If you want to nudge it 50% of it’s own height, then use a transform instead. Transform takes it’s own element’s values into % calculations.

And absolute positioning is more akin to how we tend to think of relative positioning? As in it positions an element relative to it’s immediate parent?

only if the parents has relative, absolute, or fixed positioning.

Can you do the google search link I posted above and read up more about the details? I might not have fully explained all the combinations.

Right, thanks man, again really appreciate it.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.