Menu
I want to make a div with position:fixed that will overlap the content, but not clickable, i.e. when you click in that div's area you are clicking on the content under it. So the text under the div could be easily selected. Is there a way to do that?
847
If you want to make a div not clickable using CSS, you can use the pointer-events property. This property is used to specify whether or not an element can be the target of a mouse pointer event. When you set the value to none, the element will not be clickable.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
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.
The solution is to add pointer-events: none; to the CSS of the overlaying div. This will cause any all events to pointer events to ignore the overlaying div.
This is demonstrated here: http://jsfiddle.net/nayish/7hHvL/.
You'll notice that the alert, which is set only for the bottom div, works also when clicking on the overlaying div.
160
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
