Z-index和链接可访问性

时间:2014-06-25 14:57:12

标签: html css z-index

我看了一下,但我找不到适用于我特定问题的解决方案。我有一个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

2 个答案:

答案 0 :(得分:2)

我无法看到使用否定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

答案 1 :(得分:-1)

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

<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;
}