我有一個頁面上的菜單和絕對定位的div。問題是當這個div在頁面上時，我不能點擊菜單項中的任何鏈接。

當我移除這個div (#left_border)時，鏈接又可以點擊了。

為什么？

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>

這里你可以看到，你不能點擊菜單項:http://jsfiddle.net/Dq6F4/

CSS -要取消阻止，請單擊添加到#left_border類的以下語句:

pointer-events: none

(它是跨瀏覽器解決方案，包括& gt= IE11)

這里是這個解決方案的來源和更多的信息。我在chrome、firefox和safari (macOs和iOS)上測試過，效果不錯:)

添加一個z索引:-1；這將允許鏈接被點擊。因為Div絕對位于鏈接上，所以它不允許點擊。

#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;
    z-index:-1;
}

以下是相同的工作解決方案。

希望這有所幫助。

將z-index:1放在具有絕對屬性組件上。

例如:

function myFunction() {
  document.getElementById("print").innerHTML = "Hello World";
}

.custcontainer {
    position: relative;
    
}
.custcontainer .like {
    position: absolute;
    top: 18%;
    left: 10%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    cursor: pointer;
    font-size:30px;
    text-align: center;
    z-index: 1;
}

<div class="custcontainer">
  <P id="print"></p>
  <button onclick="myFunction()" class="like">like</button>
  <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>
</div>

添加位置:相對于#菜單

#menu
{
    position:relative;
}

JS小提琴演示

z-index有問題..

它涵蓋了菜單元素:

#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;
    z-index:-111;
}

http://jsfiddle.net/Dq6F4/2/

你的問題實際上是#left_border將鏈接覆蓋為覆蓋。限制它的寬度.. 例如

#left_border{
  width:50px;
}

使用谷歌Chrome或Mozilla Firefox的開發工具懸停在你的鏈接和div上(或者選擇它們)。這樣你就可以看到發生了什么，而且很有可能，有另一個div或其他對象堆疊在你的鏈接上，阻止你點擊它們。 Firefox還有一個3D選項，可以更好地可視化這一切:

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view

我發現了一個非常簡單有效的解決方案！我將左邊設置為一個百分比——以像素為單位——并添加了一個邊距——以像素為單位。這非常有效！！ http://2 lets code . blogspot . com/2014/07/links-not-clickable-when-inside . html

Z-index僅適用于定位的元素。定位元素是其位置值設置為絕對、固定、相對或粘性的元素。也就是說，元素必須設置為除static之外的任何位置值，static是默認的位置值。參見這篇文章

答案是z指數。如果您的div元素定位為固定的或絕對的(不是相對的)，那么您是在告訴瀏覽器將您的DOM元素呈現為層，而不是默認序列。因為您的div正在使用& quot絕對& quot定位時，你需要正確設置圖層的順序，以保持上面的可點擊DOM元素。默認z索引為零。將link元素設置為1應該可以。如果基礎圖層上有其他元素，則相應地增加z索引圖層。將基礎圖層設置為負z-index是另一種選擇，但是如果在頂層和基礎圖層之間有許多圖層，這將會很復雜。

#link_element {
    z-index:1;
}