Hide overflow on elements with fixed position

Question

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/

Answer 1

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

Answer 2

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 .

Answer 3

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