Question

当按下固定的div以降低到另一个时，尝试使链接工作。

以粉色显示的主条保存链接，当使用常用方法将包含文本的div叠加到条上时，由于包含文本的全宽容器div，它会阻止链接工作。

我想知道是否有可能获得所需结果的途径？！

HTML

<div class='text-wrapper'>
    <div class='text_in_middle'>
        some text
    </div>
</div>
<div>
    <div class='bar'>
        &nbsp;
        <a href='' >Link 1</a> -
        <a href='' >Link 2</a> -
        <a href='' >Link 3</a> 

    </div>
</div>

CSS

 .text_in_middle {
    text-align: center;
}
.bar {
    z-index: 500;
    position: fixed;
    top: 0;
    min-width: 100%;
    background-color: pink;
}
.text-wrapper {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2500;
}

Answer 1

虽然它有somewhat limited support，但解决此问题的一种方法是将pointer-events: none添加到固定元素。这样做，您就不必更改任何其他CSS / HTML。

EXAMPLE HERE

.text-wrapper {
    pointer-events: none;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2500;
}

Answer 2

如果我正确理解您的问题，为什么不将背景颜色添加到<div class='text-wrapper'></div>？

然后，您还需要更改z-index值，以便链接显示在前面。

.text_in_middle {
    text-align: center;
}
.bar {
    z-index: 500;
    position: fixed;
    top: 0;
    min-width: 100%;
}
.text-wrapper {
    background-color: pink;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 200;
}

updated fiddle

CSS使用固定div覆盖居中文本，链接不起作用

2 个答案: