在可点击链接上方划分

Question

我想在另一个包含链接的div之上创建一个div。 问题是第一个div阻止访问链接。 有可能使其呈现但可访问吗？

（我不想在div周围做边框，或类似的东西，我真的想使div在另一个div之上）

在演示中

HTML：

<div class="top">
<a href="#">LINK</a>
</div>
<div class="bottom"></div>

CSS：

.top { 
height:100px;
width:200px;
position:fixed;
top:10px;
background:yellow; }

.bottom { 
height:50px;
position:fixed;
top:10px;
width:100px;
border:3px solid red; }

Answer 1

我相信您正在寻找pointer-events:none; 在.bottom的CSS中

尝试这个：

.bottom { 
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    pointer-events:none;
}

http://jsfiddle.net/wrxsti85/aYV4J/

希望能帮助到你！

编辑：添加了一个小提琴

Answer 2

你可以这样

.top a{
    position:relative;
    z-index:2;
}

在.bottom div中提到

.bottom { 
    z-index:1;
}

更新了jsFiddle文件

Answer 3

使用z-index

演示

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
    z-index:99999;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
}

Answer 4

使用z-index将一个放置在另一个上方：

.top {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    z-index:1;
    background:yellow;
}
.bottom {
    height:50px;
    position:fixed;
    top:10px;
    width:100px;
    border:3px solid red;
    z-index:0;
}

Answer 5

只需添加您当前的CSS：

.bottom{
    ....

    pointer-events:none;
}

否则，只有在没有任何z-Index限制的情况下，才可以为.top类添加/增加z-Index值。

Answer 6

我不明白你们为什么使用position:fixed在这里。 如果您不希望有任何边界并且希望它简单易用，请使用：

.top { 
    height:100px;
    width:200px;
    background:yellow; 
    position:relative;
}

.bottom { 
    height:50px;
    position:absolute;
    top:10px;
    width:100px;
    border:3px solid red; 
    z-index:-1;
  }

链接到小提琴http://jsfiddle.net/wVLa8/24/

Answer 7

请检查这个小提琴 。 也许用左手握住右耳，但是唯一的解决方案（没有浏览器支持问题）可以在对象的前面创建不可见的镜像对象，从而使后面的对象无法访问并将事件转移到原始对象...

$(function () {

    $.each($('.back').children(), function () {

        var $behindObject = $(this),
            $behindObjectOffset = $behindObject.position();

        $('<div class="invisible-mirrors">')
            .css({
                width: $behindObject.width(),
                height: $behindObject.height(),
                top: $behindObjectOffset.top,
                left: $behindObjectOffset.left
            })
            .on('click', function () {
                $behindObject.trigger("click");
            })
            .appendTo('.fore')
    });


    //test of click event

    $('.back a').on('click', function () {
        $(this).text($(this).text() + ' got the event : click')
    })


})

Answer 8

天哪，这都是没有必要的。 不要使用Z-INDEX，也不要使用POINTER-EVENTS。

请先看这个小提琴

只需重新排列HTML并正确命名CSS选择器即可：

HTML：

<div class="bottom">
    <div class="top"> <a href="#">LINK</a>
    </div>
</div>

被认为“其他”或“之前”的元素在HTML中首先出现。

CSS：

.bottom {
    height:100px;
    width:200px;
    position:fixed;
    top:10px;
    background:yellow;
}
.top {
    height:50px;
    position:absolute;
    width:100px;
    border:3px solid red;
}

您也不需要两个position: fixed; 。 只有容器。 这也意味着他们不应该是一个，然后是另一个。 如果真的需要它们，可以像以前一样固定它们并更改HTML，但我建议不要这样做。

Answer 9

试试这个，它将Divs放在另一个之上：

.top { 
    height:100px;
    width:200px;
    top:10px;
    background:yellow;
    display:block;}

.bottom { 
    height:50px;
    top:10px;
    width:100px;
    border:3px solid red;
    display:block;}

Answer 10

不知道为什么要按照自己的方式做。

Z-index可用于将一个div放在另一个div之上，但是有更好的方法来做您想要的事情。

看到这个小提琴

HTML

<div class="bottom">
<a href="#">LINK</a>
</div>

CSS

 .bottom {height:auto;width:100px;border:3px solid red;background:yellow; }
 .bottom a {display:block;margin:0 auto;background:yellow;padding:20px;text-align:center;}