Menu
I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items.
When I remove this div (#left_border), then links are clickable again.
Why?
CSS:
#left_border { background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png); background-position: 0 0; background-repeat: no-repeat; width: 1094px; background-size: 100% auto; position: absolute; height: 850px; left: -51px; top: 0px; } HTML:
<div id="wrapper"> <div id="content"> <div id="left_border"></div> <div id="left"> <div id="menu"> <ul class="menu"> <li class="item-101 current active deeper parent"><a href="/">Home</a> <ul> <li class="item-107"><a href="/index.php/home/news">News</a> </li> </ul> </li> <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a> </li> </ul> </div> </div> </div> Here you see, that you cannot click on menu items: http://jsfiddle.net/Dq6F4/
932
If you are placing an element with absolute position, you need the base element to have a position value other than the default value. In your case if you change the position value of the parent div to 'relative' you can fix the issue.
If you position a flex item absolutely, it no longer participates in the flex layout. This means any flex properties on the item become moot. You can remove them if you like.
Clearly, nothing can be absolute and relative at the same time. Either you want the element to position itself based on another ancestor's position or based on the page flow.
CSS - to unblock clicking add to #left_border class following statement:
pointer-events: none (it is cross-browser solution including >= IE11)
Here is source of this solution with more informations. I tested it on chrome, firefox and safari (macOs and iOS) and works :)
If you like this answer buy me a coffee
157
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
