CODEWITHSUNDEEP
htmlcss
Victor Marchuk
Victor Marchuk

Reputation: 13884

not clickable div with position:fixed

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?

Upvotes: 22

Views: 23732

Answers (5)

Markus Denicolo
Markus Denicolo

Reputation: 1

Had the same problem. But i found a way wich worked for me. You could simply position the fixed element inside of the container wich is overlapping it. As you set position: fixed it does not matter where the element is in the mark-up, because it will still stay on the same place.

Upvotes: 0

Agent
Agent

Reputation: 1395

I had the same problem. Basically I have designed sidebar, Left side is fixed and right is scrollable. The left contains links, when I tried to navigate, I found the link was not clickable. I changed z-index: 1 to z-index: 100. Therefore my navs links worked again.

Upvotes: 3

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15775

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.

Upvotes: 39

Wayne Smith
Wayne Smith

Reputation: 4868

Whatever is on displayed in front is also what is being clicked on. one way to handle that is to make a transparent graphic for the links that appears over the links and zindex that transparent image in front of the position absolute content. Easy to do if the links are menu buttons with a known size.

Update an example

<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>

The img position:absolute remains at current screen position over the div menu button. zindex will push it in front of the fixed content. It is easy if you know the space for the link that is covered up.

Upvotes: 0

Kasturi
Kasturi

Reputation: 3333

You might have to use a setCapture on the underlying div during the hoverOver of this fixed div and releaseCapture during the hoverOut

var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");

overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";

Upvotes: 0

Related Questions