Question

我看了一下，但我找不到适用于我特定问题的解决方案。我有一个div作为背景，所以它必须在其余的元素之下，然后另一个必须低于该背景，但仍然允许链接工作。

基本的HTML结构是：

<div class="wrap">
  <div class="cover"></div>
  <div class="container">
    <div class="elem">
        <a href="#">Link</a>
    </div>
  </div>
</div>

CSS是：

.cover {
  position: absolute;
  z-index: -1;
}

.elem {
  position: relative;
  z-index: -2;
}

.elem a {
  position: relative;
  z-index: 10;
}

JSFiddle代码段here。

Answer 1

我无法看到使用否定z-index的理由，因为这应该有效：

.cover {
    position: absolute;
    z-index: 1;
}

.elem {
    position: relative;
    z-index: 0;
}

.elem a {
    color: white;
    /* not needed */
    /*position: relative;
    z-index: 10;*/
}

Demo

Answer 2

这是正确答案......

<div class="wrap">
    <div class="cover">
      <div class="container">
          <div class="elem">
              <a href="#">Link</a>
          </div>
      </div>
    </div>
</div>

CSS

.cover {
    height: 200px;
    width: 300px;
    margin-left: 100px;
    margin-top: 50px;
    background-color: orange;
    position: absolute;
    z-index: 0;
}

.elem {
    background-color: green;
    height: 150px;
    width: 250px;
    position: relative;
    z-index: 2;
}

.elem a {
    color: white;
    position: relative;
}

Z-index和链接可访问性

2 个答案: