Нажав на слои / деления - PullRequest
Новая
       22

Нажав на слои / деления

13 голосов
/ 29 мая 2009

Если у меня есть два слоя на странице, разделенные по горизонтали, со вторым слоем, перекрывающим часть первого слоя, возможно ли сделать так, чтобы он «просвечивал»?

У меня есть ссылки в первом слое, который перекрывается вторым слоем, что мешает ссылкам кликать. Есть ли способ сделать слой отображаемым, но проходить по нему, оставляя при этом свои собственные ссылки кликабельными?

редактирование:

Вот пример с html и таблицей стилей.

Тестовые ссылки становятся недоступными для клика, когда они встроены в заголовок в Layer3, но ниже этого уровня все в порядке. Есть ли способ исправить это? 

<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
<body>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">Brands</h3>
</div>
<div id="Layer2" class="Layer2"><h1>TEST</h1>
<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>
<div id="Layer3" class="Layer3"><h1>Ed Hardy Auctions</h1>
</div>
</div>
</body>
</html>

И КСС 

#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 {
    position:absolute;
    left:10px;
    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 {
position:absolute;
top:67%;
padding:20px;
width: 100%;
}

Ответы [ 7 ]

28 голосов
/ 06 марта 2011

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

pointer-events:none;

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

5 голосов
/ 29 мая 2009

Это невозможно, если вы хотите, чтобы элементы div остались в своих текущих x, y, (и что наиболее важно) z - только «верхний» слой активен.

Дополнение после ОП редактировать:

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

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

Так что вы должны что-то изменить.

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

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

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

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

4 голосов
/ 05 июня 2009

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

0 голосов
/ 08 июня 2009

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

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

0 голосов
/ 08 июня 2009

Несколько лет назад я отправил сообщение об ошибке в Firefox Bugzilla, сказав, что в Firefox была именно эта ошибка.

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

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

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

Тот факт, что div прозрачен, не означает, что вы сможете щелкнуть по нему.

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

Грег

0 голосов
/ 08 июня 2009

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

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

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

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

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

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

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

0 голосов
/ 29 мая 2009

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

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

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

Добавить позицию: относительная; Z-индекс: 100; на #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...