9

Is there any way to hide the overflow of a fixed div with a container? I thought fixed inside fixed would do it, but it seems it's not the case. The only workaround I can think of is "inverted" masks: other fixed divs hiding everything around the one, but it'd be better if there are any other solutions.

Here's the fiddle: http://jsfiddle.net/pjFa6/1/

Yisela
  • 6,909
  • 5
  • 28
  • 51
  • Remove the fixed from the inner div, and add `position: relative;` to them. http://jsfiddle.net/pjFa6/12/ – Jeemusu Aug 13 '12 at 02:49
  • The question only refers to divs with fixed position. – Yisela Aug 13 '12 at 02:50
  • In that case the only thing I can think of is setting the inner div to position absolute instead of fixed. http://jsfiddle.net/pjFa6/15/. You can't nest a fixed element and have it contained within it's wrapping element as far as I can tell. You would have to mask it, which wouldn't be very nice. – Jeemusu Aug 13 '12 at 02:56
  • @Jeemusu Thanks, please you post your comment as an answer so I accept it – Yisela Aug 13 '12 at 03:43
  • Strangely [this is possible](http://jsfiddle.net/tilwinjoy/n8TpR/21/) with `z-index` in safari 6.1.4… :/ – T J Jun 23 '14 at 12:58

3 Answers3

9

Unfortunately it seems to be impossible to nest a fixed element within another element (fixed or not) and expect the outer element to wrap it and hide any overflow.

The only thing I can think of is setting the inner div to position:absolute instead of fixed. Here is an example based on your jsfiddle: jsfiddle.net/pjFa6/15 .

ampersandre
  • 3,156
  • 3
  • 29
  • 37
Jeemusu
  • 10,415
  • 3
  • 42
  • 64
  • it is achievable instead.. look here [http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug](http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug) – Ankit Sharma Mar 23 '15 at 19:02
1

with a z-index: any value; statement in the container will do in some webkit browsers, like chrome.

GLPease
  • 545
  • 1
  • 8
  • 19
0

In some mobile browser contexts, use of -webkit-overflow-scrolling: touch may achieve a "clipped" fixed-position element. See: https://miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
user2643307
  • 1