链接不与绝对位置一起使用

Question

我有div的绝对位置和div的相对位置。第一个div包含链接，第二个div包含一些超过第一个div的内容。第一个div的{​​{1}}为1，而第二个的z-index为-1，第一个z-index也是第一个。

虽然第一个div中的链接无法点击。我现在知道，为什么会这样。

Fiddle

div和side1都会有背景图片。内容应该出现在两侧，但链接仍应有效。

Second fiddle

Answer 1

将.side更改为z-index: 1，或将#container更改为margin-top: 150px而不是padding-top。

#books的{​​{1}}为1，但它位于z-index为-1的容器内，因此它仍然低于z-index #container以下z-index: -1 1}}但是在之后呈现（因此在顶部）。

Answer 2

在您的代码中

            z-index: -1;
            position: absolute;

我认为这就是原因。将-1更改为1会将其修复。不确定我是否遗漏了某些内容，如果是，请在评论中解释和/或更新问题。

Answer 3

这些链接是不可点击的，因为div标签已经超过了它。

此标记：

  <div class="side side2"></div>

给.side2元素一个较低的z-index来隐藏它。

Answer 4

你的第一个div和你的第二个div都共享了.side，它是用z-index: -1定义的。因此两者都处于相同的堆栈级别，而标记中最后一个级别将位于前一个堆栈的顶部。您所要做的就是给.side1一个大于-1的z-index。