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

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

试试这个：

.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;
}

<强> updated jsFiddle file

Answer 3

使用z-index

demo

.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

请检查this fiddle。也许用左手握住右耳，但唯一的解决方案（没有浏览器支持问题）在对象前面创建隐形镜像对象，这使得对象无法访问，并让它们将事件传递给原始对象......

$(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。

Please look at this Fiddle first

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

HTML：

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

被视为“UNDER”或“BEFORE”的元素其他元素首先出现在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之上，但有更好的方法可以做你想要的。

请参阅此Fiddle

<强> 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;}

划分可点击链接

10 个答案:

Please look at this Fiddle first

HTML：

CSS：