Question

我想制作一个较低z-index可点击的锚点，这里有一个小提琴：

仅为锚点设置z-index（与partent div不同）不起作用。

.underlay a {
    position: absolute;
    z-index: 5000;
}

Answer 1

首先将两个DIV叠加在一起是什么意思？

如果要将元素放置在容器的外边缘，可以使用多种方法：

postion: relative和孩子的postition: absolute或
float: left和float: right（清除容器）或
在孩子身上使用display: inline-block和width: 50%，或
有两列的布局<table>（是的，我知道。告诉我。）或
在容器上使用display: table-row，在子容器上使用display: table-cell，或
display: flex，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://caniuse.com/#feat=flexbox

后者的工作原理如下：

.container {
    border: 5px inset red;
    width: 300px;
    padding: 5px;
    display: flex;
}
.overlay {
    margin-right: auto;
}
.underlay {
    margin-left: auto;
}

<div class="container">
    <div class="overlay">
        <a href="#1">Link 1</a>
    </div>
    <div class="underlay">
        <a href="#2">Link 2</a>
    </div>
</div>

使较低z-index级别的链接可单击

1 个答案: