Когда добавляется div с абсолютной позицией, нельзя нажимать на ссылки

У меня есть меню на странице и 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/

Ответ 1

Добавить z-index:-1; Это позволит щелкнуть ссылки. Поскольку The 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;
}

Ниже приведено Рабочее решение.

Надеюсь, что это поможет.

Ответ 2

чтобы разблокировать щелчок, добавьте в #left_border класс css следующую инструкцию:

CSS

pointer-events: none

(это кросс-браузерное решение, включая >= IE11)

Вот источник этого решения с дополнительной информацией. Я тестировал его на chrome, firefox и safari (macOs и iOS) и работает:)

Ответ 3

у вас есть проблема с 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/

Ответ 4

Добавить position:relative в #menu

#menu
{
    position:relative;
}

JS Fiddle Demo

Ответ 5

Используйте инструменты Google Chrome или Mozilla Firefox для зависания ссылок и разделов (или выберите их). Таким образом, вы можете видеть, что происходит, и, скорее всего, есть другой div или другой объект, уложенный поверх ваших ссылок, что мешает вам щелкнуть их. В Firefox также есть 3D-вариант, который еще лучше визуализирует все это:

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

Ответ 6

Ваша проблема связана С#left_border, охватывающей ссылки как оверлей. ограничение ширина. например.

#left_border{
  width:50px;
}

Ответ 7

Я нашел очень простое решение, которое работает! Я установил слева на процент - он был в пикселях и добавил маржу слева в пикселях. И это работало как шарм!! http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html