Question

文本Link应该用作链接，但它不起作用，因为.container .image的z-index为-1。如果我删除z-index，它可以工作，但是图像不在黄色阴影后面。

如何在将背景图像保留在黄色框阴影后面的同时使文本可点击？

HTML：

<div class="container">
    <div class="side"></div>
    <div class="image" style="background: url('http://i.imgur.com/T0VWLqZ.png');">
        <div class="menu">
            <ul>
                <li><a href="#">Link</li>
            </ul>
        </div>
    </div>
</div>

CSS：

a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 900px;
    height: 300px;
}

.container .image {
    width: 598px;
    height: 300px;
    float: right;
    position: relative;
    z-index: -1;
}

.container .side {
    float: left;
    width: 302px;
    height: 300px;
    background: red;
    box-shadow: 5px 0 5px -5px yellow;
}

.container .image .menu {
    position: absolute;
    bottom: 0;
    left: -25px;
}

.container .image .menu ul {
    list-style: none;
    margin: 0;
}

.container .image .menu ul li {
    display: inline-block;
    text-align: center;
    padding: 10px;
    background: white;
}

Answer 1

看看这个小提琴：http://jsfiddle.net/5mbK8/5/

解决方案是将菜单放在.image div之外。
当然，您必须根据left: 300px;的宽度调整.side。

编辑（添加代码）：

<div class="container">
    <div class="side"></div>
    <div class="image" style="background: url('http://i.imgur.com/T0VWLqZ.png');">      </div>
    <div class="menu">
        <ul>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

CSS：

a {
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    position: relative;
    width: 900px;
    height: 300px;
}

.container .image {
    width: 598px;
    height: 300px;
    float: right;
    position: relative;
    z-index: -1;
}

.container .side {
    float: left;
    width: 302px;
    height: 300px;
    background: red;
    box-shadow: 5px 0 5px -5px yellow;
}

.container .menu {
    position: absolute;
    bottom: 0;
    left: 300px;
}

.container .menu ul {
    list-style: none;
    margin: 0;
}

.container .menu ul li {
    display: inline-block;
    text-align: center;
    padding: 10px;
    background: white;
}

由于z-index而无法单击链接

1 个答案: