链接在分层div中不起作用

Question

我一直在试图找出如何让我的链接在分层div中工作

我有一个包含两个其他div的大div：

• 主要内容和内容
  
• 我的菜单的导航div

问题是main div与导航div重叠，其中我希望我的链接是（色带），这样看起来它们在悬停时被拉出。 但它们根本不是活跃的链接？ 我的css如下：

    .navigate {
    width: 1020px;
    height: 300px;
    position: absolute;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    top: 190px;
    z-index: -1;
    border: 1px solid red;}

和

.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */ 
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */ 
z-index: 0;
border: 1px solid green; }

它就像navigation div背后的东西：$

当我在navigation div中将z-index更改为0时，它工作得很好，除了div不在main div 。

我试着修复它

body {
position: relative;
z-index: 0; }

在某个地方读到它应该解决问题 - 但不适合我

任何想法如何解决它？

提前致谢

Answer 1

目前，您将.navigate div z-index设置为-1，因此它位于.main div之后。 使它比其他div更大，所以它在顶部。 例如z-index: 101;

Answer 2

搞定了！

刚刚添加：

position: relative;

到.main-div

Answer 3

当我在导航div中将z-index更改为0时，它工作得很好，除了div不在主div之后。

如果我理解正确，如果在链接顶部有另一个div重叠，则无法获得链接。 如果导航div位于主div下，Nav div上的链接将不起作用

但..

如果你想要顶部链接的div - poistion它们相对或绝对或固定，并将z-index设置为任何高于你想要的div的数字

Answer 4

例如，对于想要覆盖的div使用负边距

.overlay-div{margin-top:-20px;}