Html 链接不使用绝对位置

我有一个带绝对位置的

div

，还有一个带相对位置的

div

。第一个

div

包含链接，第二个

div

包含一些位于第一个

div

之上的内容。第一个

div

的

z-index

为1，而第二个

z-index

为-1，第一个

div

也首先声明

尽管如此，第一个

div

中的链接是不可链接的。我现在知道了，为什么会这样

side1

和

side2

都有背景图像。内容应该出现在侧面，但是链接应该仍然有效

---

将

.side

更改为

z-index:1

，或将

#container

更改为

页边距顶部：150px

而不是

填充顶部

---

#books

的

z-index

为1，但它位于一个

z-index

为-1的容器内，因此它仍然位于

#容器的下方，该容器具有
z-index:-1
，但会在之后渲染（因此位于顶部）。
由于div标记在其上方，因此链接不可链接

此标签：

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



给.side2元素一个较低的z索引以隐藏它。
在您的代码中

            z-index: -1;
            position: absolute;

我想这就是原因。将
-1
更改为
1
可以修复此问题。不确定我是否遗漏了什么，如果是，请在注释中解释和/或更新问题。
您的第一个div和第二个div都共享类
。side
，该类由
z-index:-1
定义。因此，两者都在相同的堆栈级别上，标记中最后一个将位于前一个的顶部。你所要做的就是给
.side1
一个大于-1的z索引。
通过编辑，你不能让它像你提供的HTML那样工作-这必须改变。您有
.side1
，它应该出现在
#content
下面，但您希望
.side1#book
出现在
#content
上面，这是行不通的。如果你把
#书籍
移到
.side1
之外，就很容易按照（我认为）你想要的方式设置它，可以吗？请参见+1，当一个标记包含在position:absolute元素中时，z-index确实有效（position:relative of a tag在我的场景中也是需要的）。