-1

我正在尝试设计一种布局，我想在其上将一个 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

4

2 回答 2

0

答案是，你不能。因为父容器已经设置为z-index:-10，所以子容器的 z-index 值不能高于该值。也许您可以尝试像这样更改一些标记，因为您已经position:relative在containerdiv 那里申请了

<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/

于 2013-06-18T07:19:27.640 回答
0

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>

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

于 2013-06-18T06:58:13.083 回答