Не зависающий div с позицией: фиксированный

Я хочу сделать div с position:fixed, который будет перекрывать содержимое, но не кликать, т.е. когда вы щелкаете в той области div, которую вы нажимаете на содержимое под ним. Таким образом, текст под div можно легко выбрать. Есть ли способ сделать это?

Ответ 1

Решение состоит в том, чтобы добавить pointer-events: none; в CSS наложенного div. Это приведет к тому, что любые события будут содержать указатели, чтобы игнорировать оверлейный div.

Это показано здесь: http://jsfiddle.net/nayish/7hHvL/.

Вы заметите, что предупреждение, установленное только для нижнего div, также работает при нажатии на оверлейный div.

Ответ 2

Возможно, вам придется использовать setCapture в базовом div во время hoverOver для этих фиксированных div и releaseCapture во время hoverOut

var underlyingDiv = document.getElementById ("div1");
var overlyingDiv = document.getElementById ("div2");

overlyingDiv.onHoverOver = "underlyingDiv.setCapture";
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture";

Ответ 3

Все, что отображается на передней панели, также является тем, на что нажимается. один способ справиться с этим - сделать прозрачную графику для ссылок, которые появляются над ссылками и zindex, что прозрачное изображение перед абсолютным содержимым позиции. Легко сделать, если ссылки представляют собой кнопки меню с известным размером.

Обновить пример

<a href="#">
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100">
</a>
<div style="width:100px; height:100px">
this is my menu button
</div>

Позиция img: абсолютное значение остается в текущем положении экрана над кнопкой меню Div. zindex будет подталкивать его перед фиксированным контентом. Это легко, если вы знаете пространство для скрытой ссылки.