Question

点击嵌套DIV中的链接时遇到一些麻烦，从我发现我需要在某处设置z-index但是没有运气让它工作。我已经尝试添加除div id之外的所有内容以及指向z-index的链接：-1;并将链接div添加到z-index：100。

HTML：

<div id="dots" align="center"><img src="dots_overlay.png"></div>
<div id="logo" align="center"><img src="logo.png"></div>
<div id="header" align="center">Service Links</div>
<div id="wrapper" align="center">
    <div id="left-column">
        <div id="titles">Header 1</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div>
    <div id="center-column">
        <div id="titles">Header 2</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div>
    <div id="right-column">
        <div id="titles">Header 3</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div>
</div>
<div id="wrapper" align="center">
    <div id="left-column">
        <div id="titles">Header 4</div>
        <div id="clickables">Link</div>
    </div>
    <div id="center-column">
        <div id="titles">Header 5</div>
        <div id="clickables">Link</div>
    </div>
    <div id="right-column">
        <div id="titles">Header 6</div>
        <div id="clickables">Link</div>
    </div>
</div>

CSS：

body {
    background-color: #f7f7f7;
    background-image: url('background.jpg');
    background-repeat: repeat-x;
    margin: 0;
    padding: 0;
}

#dots {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}

#logo {
    position: fixed;
    top: 40px;
    left: 0px;
    right: 0px;
}

#header {
    position:fixed;
    top:130px;
    left:0px;
    right:0px;
    font-family:arial;
    font-size:2em;
    font-weight:bold;
    color:fff;
}

#wrapper {
    position: relative;
    top: 50px;
    width: 900px;
    margin: 0 auto;
    padding-top: 150px;
}

#left-column {
    float: left;
    width: 300px;
}

#center-column {
    float: left;
    width: 300px;
}

#right-column {
    float: left;
    width:300px;
}

#titles {
    font-family: arial;
    font-size: 1.3em;
    font-weight: bold;
    color: #646464;
    padding-bottom: 10px;
}

#clickables {
    padding-bottom: 5px;
    z-index: 100;
}

如果有人能指出我需要添加我的z-index的地方，我将非常感激！

Answer 1

添加到第一个包装器的末尾。

经过测试，确实有效。

就像那样：

<div id="dots" align="center"><img src="dots_overlay.png"></div>
<div id="logo" align="center"><img src="logo.png"></div>
<div id="header" align="center">Service Links</div>
<div id="wrapper" align="center">
    <div id="left-column">
        <div id="titles">Header 1</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div>
    <div id="center-column">
        <div id="titles">Header 2</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div>
    <div id="right-column">
        <div id="titles">Header 3</div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
        <div id="clickables"><a href="#">Link</a></div>
    </div
    <div style="clear:both"></div><!-- This is what i added-->
</div>
<div id="wrapper" align="center">
    <div id="left-column">
        <div id="titles">Header 4</div>
        <div id="clickables">Link</div>
    </div>
    <div id="center-column">
        <div id="titles">Header 5</div>
        <div id="clickables">Link</div>
    </div>
    <div id="right-column">
        <div id="titles">Header 6</div>
        <div id="clickables">Link</div>
    </div>
</div>

Answer 2

首先，注意不要在同一页面中多次使用相同的ID，它们应该是唯一的，最佳做法：仅使用CSS类。

然后，即使z-index为100（不良练习顺便说一句），固定元素也会在上面。您可能不需要在固定中包含这么多元素，徽标和点在header元素中可能更好，只有这个元素在position: fixed中。因此，您可以轻松确定标题下没有您无法点击的链接。

然后，您不应该在每个链接周围使用div，但如果需要，可以使用ul>li。

我不想为你提供真正的答案，而是更多的理解，因为他似乎是你目前最需要的东西：）

无法单击嵌套div中的链接

2 个答案: