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,803
  • 5
  • 26
  • 49
  • 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,046
  • 3
  • 28
  • 37
Jeemusu
  • 10,166
  • 3
  • 40
  • 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
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
  • 80,501
  • 25
  • 149
  • 167
user2643307
  • 1
0

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

Fadeoc Khaos
  • 508
  • 1
  • 7
  • 18