A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
Great article! An important clarification would be that the containing block for a fixed positioned element is not always the viewport: if they have a parent with a transform applied, it will behave pretty much as if it was absolute positioned to it.
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
Great article! An important clarification would be that the containing block for a fixed positioned element is not always the viewport: if they have a parent with a
transform
applied, it will behave pretty much as if it was absolute positioned to it.Hi,
Can you clarify this because it's the first time I'm hearing about it.
Are you saying parent with "transform" property will act as a base for a fixed positioned item inside it?
Exactly. Same thing happens with
filter
andperspective
, but browsers are inconsistent on those.Here's a quick demo with
transform
jsfiddle.net/to4g607c