Padding in percentages – for fixed element

[Senff]

Heyoo

I have an element that has a padding value in percentages. Normally, the resulting padding is the percentage of it’s CONTAINER width. So if the container of the element is 1000px wide, and the element has 5% padding, the result will be 50px padding.

So far so good.

But now, this element gets a position:fixed. Even though its container (in the markup) is still 1000px wide, it will now use 5% of the DOCUMENT width.

See pen here: http://codepen.io/senff/pen/RNaRKb

Two questions.

1. Is there a way to ensure that (without changing the 5% padding), it will still take the 5% of the container, and not the DOCUMENT (= viewport width)? I need to make sure that the padding will always be 5% of its container in the markup, regardless of it’s position value.
2. Now that the element has become fixed…in the DOM, what is the container of the element? I know that in the MARKUP it’s still the original container, but do we now consider that the BODY has become the container (or parent) in the DOM?

[Paulie_D]

BODY has become the container (or parent) in the DOM?

I’d have to say “yes” mostly…fixed not only takes it out of the flow but it positions / and sizes it directly in relation to the viewport.

Clearly it’s severing all connection to it’s original parent.

In fact, insofar as the ‘fixing’ goes we know that it doesn’t matter where the element is in the source..so it seems logical that, in fact, it’s parent is now effectively the viewport…not the body.

As for a solution to your issue, I can’t think of a CSS method.

[Senff]

I see. I guess this is a good example of “what is the DOM actually”.

As for the issue: the only way I can seem to figure it out is to use JS (detect width of parent, check percentage value, apply padding in pixels). But that feels dirty.

[Paulie_D]

MDN (my emphasis)

Fixed positioning is similar to absolute positioning, with the exception that the element’s containing block is the viewport.

[GSutherland]

Yeah, I’m pretty sure you’re going to have to resort to some javascript here if you really need to go the fixed route. Kind of curious what the application for this is, never run into this issue myself.

[Senff]

@GSutherland: here’s the application of it.

I have a plugin that creates a clone of an element, with all the same classes and IDs (so that it will have the same styles and look & feel), with the only difference that it has position:fixed.

That works fine if the original element has padding in pixels — the clone will have the same padding. But if the padding is in percentages, then the padding of the original will be a percentage of it’s parents’ width, whereas the padding of the clone will be a percentage of the body width (because of the fixed positioning of the clone).

[Author]

Posts