Щелчок по слоям/divs

Ответ 1

Невозможно, если вы хотите, чтобы divs оставались в их текущем x, y, (и, самое главное) z - только "верхний" слой доступен для клика.

Добавление post OP edit:

Подумайте о макете CSS, как если бы вы физически работали с кусочками бумаги (это намного проще визуализировать, если вы дадите всем своим "слоям" разные цвета фона). Механизм рендеринга вырезает немного бумаги в размерах, которые вы даете (или работает) для каждого найденного элемента. Он делает это в том порядке, в котором он сталкивается с тем, что они кладут каждый лист бумаги на страницу, пока он идет - последний элемент будет сверху.

Теперь вы сказали движку рендеринга поставить ваш третий div в положение, где он перекрывает второй. И теперь вы ожидаете, что сможете "увидеть" покрытый контент. Не работал бы с бумагой, не будет работать с HTML. Просто потому, что он прозрачный, не означает, что он не занимает места.

Итак, вам нужно что-то изменить.

Глядя на ваш CSS и разметку (которая, честно говоря, может быть очищена, но я возьму на себя другую надпись, которую вы не показываете нам, которая ее оправдывает) есть несколько простых способов:

1). Установите z-index of -1 на Layer3. z-index - это то, как вы можете изменить порядок слоев из значения по умолчанию (как встречалось). Это просто перемещает весь слой Layer3 ниже остальной части страницы, так что скрытое становится открытым, но также наоборот в зависимости от содержимого.

2). Изменить ширину от 100% до, например,. 80% или, более вероятно, с учетом использования pos: abs set left: 0px и right: 199px; (Я предполагаю, что padding-left на Layer2 является назначенной шириной столбца?). Стоимость этого заключается в том, что ваш Layer3 больше не составляет 100% ширины

3). Разметка столбца CSS Google и найдите шаблон, который отражает то, что вам нужно, и адаптируйте его. Каждый макет CSS, который можно сделать, уже был сделан миллион раз. Существуют стандартные методы, которые решают ваши проблемы. CSS трудно, если вы еще не создали опыт, поэтому используйте опыт других. Не изобретайте велосипеды.

Ответ 2

Думал, что я обновил бы это, поскольку я боролся с этим в течение нескольких часов и думаю, что нашел решение. Посмотрел на использование JQuery, но свойство CSS:

pointer-events:none;

... сделал именно то, что я хотел.

Ответ 3

Это была бы мамонтовая работа, но это возможно.
Вам нужно будет захватить событие click на верхнем слое /div и найти позицию x-y курсора.
Затем найдите все ссылки в слое /div под верхним слоем и посмотрите, падает ли его положение на экране вокруг текущей позиции мыши.
Затем вы можете вызвать щелчок соответствующей ссылки.
Я бы использовал jQuery (если вы еще этого не сделали) для этого, а затем повторно разместите с тегом jQuery, если у вас возникнут проблемы.

Ответ 4

Трудно сказать, не видя кода.

Вы можете попробовать установить z-index на нижнем уровне, но это работает на элементах, которые были расположены с абсолютным, относительным или фиксированным (положение: абсолютное).

изменить после просмотра кода:

Добавить позицию: относительная; Z-индекс: 100; to #rightLayer.

Или вы можете удалить ширину: 100% от .Layer3.

Вы можете захотеть реорганизовать свой код и пойти с макетом двух столбцов для #rightLayer и .Layer3.

CSS

#Layer0 {
    width:100%;
    height:100%;
}
body {
    margin:10px 10px 0px 10px;
    padding:0px;
    color:#999999;
    font-family:"Trebuchet MS",arial,sans-serif;
    font-size:70.5%;
}
#Layer1 {
    width:200px;
    margin-top:17px;
    font-size:1.0em;
    padding-left:12px;
    padding-top:8px;
}
#Layer2 {
    background:#fff;
    margin-left:199px;
    color:#000;
}

#rightlayer {
float:right;
}
.Layer3 {
}

HTML

<div id="Layer0">
    <div id="Layer2" class="Layer2">
        <h1>TEST</h1>
    </div>
    <div id="Layer1" class="Layer1">
        <h3 align="left">Brands</h3>
    </div>
    <div class="content">
        <div id="rightlayer">
            <a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p><a href="test">TEST></a><p>
        </div>
        <div id="Layer3" class="Layer3">
            <h1>Ed Hardy Auctions</h1>
        </div>
    </div>
</div>

Ответ 5

Я предполагаю из примера, что ссылки в правом слое - это единственные ссылки, которые нужно щелкнуть, и что у вас нет ссылок в других слоях. Если это так, вы можете решить проблему, изменив порядок z-индексов div.

Layer1 и Layer3 имеют абсолютную позицию, поэтому, если вы добавите стиль позиции (абсолютный или относительный) в Layer2, вы сможете вытащить этот div на передний план, а также вывести divlayer в более высокий уровень, чем Layer3.

Я добавил в CSS следующее:

#Layer2 {    
    position: relative;
    z-index: 1;
}

Из того, что я вижу, оставляет текущую настройку страницы так, как она есть, но тянет все элементы (включая правый слой со ссылками) на передний план, поэтому вы сможете щелкнуть все ссылки в ней.

Для целей отладки я предлагаю добавить цвета фона для всех разных слоев, чтобы получить представление о порядке z-индекса для разных слоев. С цветом фона на месте было довольно легко заметить слой, который падал по ссылкам, но и проверить, что новый порядок z-index делает ссылки доступными.

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

Ответ 6

Я подал ошибку несколько лет назад в Firefox Bugzilla, в которой говорилось, что эта ошибка была в Firefox.

Мне сказал инженер Mozilla, что на самом деле это не ошибка, и что это правильное поведение в соответствии с спецификациями HTML/CSS. К сожалению, я не могу найти исходную ошибку для ссылки, поскольку это было около 6 лет назад.

Причина, по которой я отправил ошибку, состояла в том, что я мог щелкнуть верхний div по ссылкам ниже при использовании IE (я думаю, 6), но Firefox не позволил мне.

Как обычно, оказалось, что у IE была некорректная реализация, и Firefox работал по назначению с помощью спецификации.

Просто потому, что div прозрачен, это не значит, что вы должны щелкнуть по нему.

Я не уверен, как можно обойти это с помощью JavaScript или CSS. Я бы сделал шаг назад и передумал, чего вы пытаетесь достичь, и как вы пытаетесь его достичь.

Грег

Ответ 7

Не можете ли вы просто установить ширину div в auto (по умолчанию для абсолютного позиционирования, т.е. просто удалить ширину: 100% от .Layer3).

Таким образом, div будет только настолько широким, насколько это необходимо, а не излишне перекрывать ссылки.