Question

我的页脚中的链接有一个问题，即z-index设置为-1。我可以通过css中的＆＃39; -a标签改变他们的风格，但他们不再像链接一样。

这里是html和css代码：

HTML

<body>
<div class="content">
</div>
<div id="footerid" class="footer">
<div id="carrier">
<table>
<tr>
<td>
<h4>About</h4>
<a href="www.google.de"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d.html"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
</td>
<td>
<h4>Impressum</h4>
<a href="www.google.de"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
</td>
<td>
<h4>Reference</h4>
<a href="www.google.de"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
<a href="d"><span class="pfeile">&#x25B3; </span>stuff</a><br>
</td>
</tr>
</table>
</div>
</div>
</body>

CSS

.content{
    padding: 100px 200px;
    padding-left: 50px;
    margin-top: -10px;
    margin-left: 150px;
    margin-right: 150px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    background-color: white;
    text-align: left;
}

.footer{
    border: 3px solid black;
    padding: 37px 0px;
    margin: 30px;
    margin-top: -40px;
    background-image: url("img/forest.jpg");
    color: white;
    position: relative;
    z-index: -1;
    background-position: bottom;
    }

#carrier {
    border: 1px solid white;
    border-top: none;
    background-color: rgba(0,0,0,0.5);
    padding: 5px;
    padding-top: 25px;
    margin: 0px 150px;
}
.footer h4{
    border-bottom: 1px dotted white;
    margin: 5px 0px;
    color: white;
}
.footer td{
    padding-left: 5px;
    padding-right: 150px;
    border-left: 1px solid white;
}

.footer a {
    text-decoration: none;
    color: white;
    font-size: 12px;
    display: inline;
}

.footer a:hover {
    color: red;
}

.pfeile {
    text-decoration: bold;
    color: red;
}

加上结果页面的图像：

Resuting Page

似乎链接不起作用，因为.footer容器的z-index为-1。但这必须是为了在.content容器下滑动（见图）那么有没有办法使链接＆＃34;可访问＆＃34;？更多.carrier容器必须在.footer容器内！

我试图将.carrier容器的z-index设置为+1 ......但是没有用。当然，我可以将.content容器的z-index设置为+1，让页脚（带有z-index 0）容器在内容区域下滑动，但这又会对导航和顶部的其他容器产生影响。页面......

提前致谢

Z-index（CSS）影响链接行为

0 个答案: