When Div With Absolute Position Is Added Cannot Click on Links

Setting position:absolute prevents me from clicking links in one div?

Put z-index: 999; on the #sidebar element. It is because another element on your page is positioned in the same area but has a higher stack order.

Example: http://jsfiddle.net/bxCT8/

Cant click div with links behind another div Absolute Position wont work

Add position:relative to the nav bar. Didn't do it? It's because maincontent has a z-index set on it. Add one too to the nav block and make sure it's higher than the one set on maincontent. That's it I guess.

Can't click links under a DIV

You need to provide the code, by default a div element with only width: 100%; specified in addition to the browsers default styling does not cause it to overlap links.

Just adding the z-index property to an element does not make it work, the element also has to be positioned, you can try position: relative;.

But you shouldn't have overlapping elements in that scenario, your code would help us make it better.

CSS - Link not clickable when using absolute position

Try adding z-index:10; to .toplink{...} class.

Click not firing on position absolute image

I stumbled upon the solution. V31 hit upon the problem, although I'm still not quite sure why this works. Perhaps it doesn't matter that the mountains are a higher z-index because it was position relative and all I had to do was move space which is a higher z-index above sun in the HTML document. If anyone would like to expand on the explanation please do, but here's a working solution that keeps the click on the sun and the sun behind the mountains.

<div id="everything">
  <img id="sunset" src="sunset1.jpg" class="img-responsive" alt="Responsive image">
  <img id="space" src="space5compressed.jpg" alt="">
  <img id="sun" src="sun1.png" class="img-responsive" alt="Responsive image">
  <img id="mountains" src="mountains.png" class="img-responsive" alt="Responsive image">
</div>

---

Related Topics