W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2016

[csswg-drafts] [css-positioning] position: fixed within a stacking context

From: Valdrin Koshi via GitHub <sysbot+gh@w3.org>
Date: Fri, 12 Aug 2016 02:15:40 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-170786466-1470968139-sysbot+gh@w3.org>
valdrinkoshi has just created a new issue for 

== [css-positioning] position: fixed within a stacking context ==
The spec of `position: fixed` specifies that: 
> Fixed positioning is similar to absolute positioning. The only 
difference is that for a fixed positioned box, the containing block is
 established by the viewport.


But it is not obvious what happens if a `position:fixed` element is 
contained in a parent that creates a stacking context. What happens is
 that the fixed element participates to the scroll and gets clipped 
    .container {
      border: 1px solid gray;
      width: 200px;
      height: 200px;
      overflow: auto;
      transform: translateZ(0);
    .tall {
      height: 400px;
    .fixed {
      position: fixed;
      padding: 20px;
      top: 80px;
      left: 80px;
      width: 150px;
      background-color: orange;

  <div class="container">
    <div class="tall"></div>
    <div class="fixed">
      I should not scroll! <br>
      I should not get clipped!

Resulting in
<img width="358" alt="screen shot 2016-08-11 at 7 12 02 pm" 

Is this an expected behavior for `position: fixed`? From the spec, I'd
 expect it to render in the top stacking context and not participate 
to the scrolling (e.g. comment the `transform: translateZ(0)` of 

<img width="292" alt="screen shot 2016-08-11 at 7 12 10 pm" 

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/400 using your GitHub 
Received on Friday, 12 August 2016 02:15:50 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:01 UTC