StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>Yes, according to the specs, there is a way.</h1> <p><em>While I agree that Graeme Blackwood's should be the accepted answer, because it practically solves the issue, it should be noted that a fixed element <strong>can</strong> be positioned relatively to its container.</em></p> <p>I noticed by accident that when applying</p> <pre><code>-webkit-transform: translateZ(0); </code></pre> <p>to the body, it made a fixed child relative to it (instead of the viewport). So my fixed elements <code>left</code> and <code>top</code> properties were now relative to the container.</p> <p>So I did some research, and found that the issue was already been covered by <a href="http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/">Eric Meyer</a> and even if it felt like a "trick", turns out that this is part of the specifications:</p> <blockquote> <p>For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.</p> </blockquote> <p><a href="http://www.w3.org/TR/css3-transforms/">http://www.w3.org/TR/css3-transforms/</a></p> <p>So, if you apply any transformation to a parent element, it will become the containing block.</p> <h1>But...</h1> <p>The problem is that the implementation seems buggy/creative, because the elements also stop behaving as fixed (even if this bit doesn't seem to be part of specification).</p> <p>The same behavior will be found in Safari, Chrome and Firefox, but not in IE11 (where the fixed element will still remain fixed).</p> <p>Another interesting (undocumented) thing is that when a fixed element is contained inside a transformed element, while its <code>top</code> and <code>left</code> properties will now be related to the container, respecting the <code>box-sizing</code> property, its scrolling context will extend over the border of the element, as if box-sizing was set to <code>border-box</code>. For some creative out there, this could possibly become a plaything :)</p> <p><a href="http://jsfiddle.net/frapporti/DYGan/"><strong>TEST</strong></a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload