Question

我正在尝试设计一个布局，我希望将一个div放到另一个布局中。但是，问题是后面div的链接不起作用。

<div id="container" style="z-index:-10;position:relative;height:100px">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>
<div id="container1" style="margin-top:10px">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>

这意味着，如果我尝试访问div id container的链接，那么我就不能。如何解决这个问题。

注意：我无法删除z-index，因为我希望container1以上container

Answer 1

Parse已经做对了。

在不知道您使用的内容的情况下，只需删除z-index:-10或将其更改为z-index:1;之类的正值。

<div id="container" style="position:relative;height:100px;">
   <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>
<div id="container1" style="margin-top:10px;">
   <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
</div>

编辑：

我刚才意识到你说你想把一个div 放到另一个。这将是这样做的：

<div id="container" style="z-index:1;position:relative;height:100px;background-color:#eee;">
    <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>

    <div id="container1" style="margin-top:10px;background-color:#ddd;">
        <a href="http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div">StackOverflow1</a>
    </div>
</div>

我在div上添加了一些background-color以使其更清晰。

Answer 2

答案是，你做不到。由于父容器已设置为z-index:-10，因此子级不能使z-index值高于此值。也许您可以尝试更改这样的标记，因为您已在position:relative div处应用了container

<a href="#" style="position:absolute;left:0;">StackOverflow1</a>
<div id="container" style="z-index:-10;position:relative;height:100px"></div>
<div id="container1" style="margin-top:10px">
    <a href="#">StackOverflow1</a>
</div>

添加position:absolute，因此链接就像它在具有较低z-index的父容器内一样，当然它是可访问的。您可以在此处查看更新的jsfiddle http://jsfiddle.net/gyheE/2/

如何访问链接，这是在div内部，如果div是另一个div的重叠

2 个答案: