Menu
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/
564
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
visible - Default. The overflow is not clipped. The content renders outside the element's box. hidden - The overflow is clipped, and the rest of the content will be invisible.
If you've ever tried sticky positioning, then you have probably wondered why CSS position: sticky is not working for your web design. It's because an ancestor element has one of the following values for the overflow property: hidden, scroll, or auto.
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 .
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
