parent child with position fixed parent overflow hidden bug

Question

I don t know if there is an issue  but I was wondering why the overflow hidden does not function on fixed parent children element   Here s an example   CSS and HTML    x000D   x000D   parent  x000D    position fixed  x000D    overflow hidden  x000D    width 300px  x000D    height 300px  x000D    background  555  x000D    x000D   children  x000D    position fixed  x000D    top 200px  x000D    left 200px  x000D    width 150px  x000D    height 150px  x000D    background  333  x000D    x000D   lt div class  parent  gt  x000D     lt div class  children  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Live demo  jsFiddle

User · Answer

You could consider using CSS clip  rect top  right  bottom  left   to clip a fixed positioned element to a parent  See demo at http   jsfiddle net lmeurs jf3t0fmf    Beware  use with care   Though the clip style is widely supported  main disadvantages are that    The parent s position cannot be static or relative  one can use an absolutely positioned parent inside a relatively positioned container   The rect coordinates do not support percentages  though the auto value equals 100   ie  clip  rect auto  auto  auto  auto    Possibillities with child elements are limited in at least IE11  amp  Chrome34  ie  we cannot set the position of child elements to relative or absolute or use CSS3 transform like scale    See http   tympanus net codrops 2013 01 16 understanding-the-css-clip-property  for more info   EDIT  Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility  so just to be sure we added   -webkit-backface-visibility  hidden  -moz-backface-visibility  hidden  backface-visibility  hidden    to the main child element   Also note that it s not fully supported by older   mobile browsers or it might take some extra effort  See our implementation for the menu at bellafuchsia com    IE8 shows the menu well  but menu links are not clickable  IE9 does not show the menu under the fold  iOS Safari  lt 5 does not show the menu well  iOS Safari 5  repaints the clipped content on scroll after scrolling  FF  at least 13    IE10   Chrome and Chrome for Android seem to play nice    EDIT 2014-11-02  Demo URL has been updated

User · Answer

If you want to hide overflow on fixed-position elements  the simplest approach I ve found is to place the element inside a container element  and apply position fixed and overflow hidden to that element instead of the contained element  you must remove position fixed from the contained element for this to work   The content of the fixed container should then be clipped as expected   In my case I was having trouble with using object-fit cover on a fixed-position element  it was spilling outside the bounds of the page body  regardless of overflow hidden   Placing it inside a fixed container with overflow hidden on the container fixed the issue

User · Answer

2016 update   You can create a new stacking context  as seen on Coderwall     lt div style  transform  translate3d 0 0 0  overflow hidden  gt      lt img style  position fixed         gt   lt  div gt    Which refers to http   dev w3 org csswg css-transforms  transform-rendering     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

User · Answer

Fixed position elements are positioned relative to the browser window  so the parent element is basically irrelevant   To get the effect you want  where the overflow on the parent clips the child  use position  absolute instead  http   jsfiddle net DBHUv 1

User · Answer

As an alternative to using clip you could also use  border-radius  0 0001px  on a parent element  It works not only with absolute fixed positioned elements

User · Answer

I had a similar  quite complex problem with a fluid layout  where the right column had a fixed width and the left one had a flexible width  My fixed container should have the same width as the flexible column  Here is my solution   HTML   lt div id  wrapper  gt       lt div id  col1  gt       lt div id  fixed-outer  gt           lt div id  fixed-inner  gt inner lt  div gt       lt  div gt      COL1 lt br   gt Lorem ipsum dolor sit amet  consetetur sadipscing elitr  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat  sed diam voluptua  At vero eos et accusam et justo duo dolores et ea rebum  Stet clita kasd gubergren  no sea takimata sanctus est Lorem ipsum dolor sit amet  Lorem ipsum dolor sit amet  consetetur sadipscing elitr  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat  sed diam voluptua  At vero eos et accusam et justo duo dolores et ea rebum  Stet clita kasd gubergren  no sea takimata sanctus est Lorem ipsum dolor sit amet       lt  div gt       lt div id  col2  gt COL2 lt  div gt   lt  div gt    CSS       wrapper       padding-left  20px      col1       background-color  grey      float  left      margin-right  -200px      col2 width        width  100       col2       background-color   ddd      float  left      height  400px      width  200px      fixed-outer       background  yellow      border-right  2px solid red      height  30px      margin-left  -420px     2x  col2 width    wrapper padding-left        overflow  hidden      padding-right  200px      col2 width        position  fixed      width  100       fixed-inner       background  orange      border-left  2px solid blue      border-top  2px solid blue      height  30px      margin-left  420px     2x  col2 width    wrapper padding-left        position  absolute      width  100       Live Demo  http   jsfiddle net hWCub

User · Answer

Because a fixed position element is fixed with respect to the viewport  not another element  Therefore since the viewport isn t cutting it off  the overflow becomes irrelevant      Whereas the position and dimensions of an element with   position absolute are relative to its containing block  the position   and dimensions of an element with position fixed are always relative   to the initial containing block  This is normally the viewport  the   browser window or the paper   s page box    ref  http   www w3 org wiki CSS absolute and fixed positioning Fixed positioning

[css] parent & child with position fixed, parent overflow:hidden bug

Examples related to css

Examples related to overflow

Examples related to parent

Examples related to fixed

Examples related to children