Как разрешить нажатие на <a> с z-индексом -1

Question

Как разрешить нажатие на <a> с z-индексом -1

Я пытаюсь позволить пользователю нажать на ссылку, у которой z-индекс равен -1. Я хочу, чтобы остальная часть содержимого страницы проходила по ссылке при прокрутке вниз, что прекрасно работает, но я не могу нажать на ссылку.

HTML:

<html>
  <body>
    <div id = "aWrap">
    <a href = "#foo">I should be able to click this</a>
    </div>
    <div id = "foo">
      <p>Rest of page content</p>
    </div>
  </body>
</html>

CSS:

body {
  margin: 0;
  padding: 0;
}

#aWrap {
  height: 100vh;
}

a {
  display: block;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#foo {
  background-color: black;
  color: white;
  padding: 40vh;
  text-align: center;
}

Вот моя ручка: http://codepen.io/anon/pen/XKNRXx?editors=1100

4

html css z-index

Источник

user5824608 22 июн '16 в 05:06

2 ответа

Решение

Добавлять z-index:0 в a пометить и добавить относительную позицию к следующему div с z-index:1 как это:

  a {
      display: block;
      z-index: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #foo {
      background-color: black;
      color: white;
      padding: 40vh;
      text-align: center;
      position:relative;
      z-index:1
    }

1

Источник

user6280781 22 июн '16 в 05:09

Другие вопросы по тегам html css z-index

user4130165 22 июн '16 в 05:11 2016-06-22 05:11 · Accepted Answer · 2016-06-22 05:11

Вот обновленный кодекс, работающий так, как вы ожидаете:

http://codepen.io/thecox/pen/xORdEe?editors=1100

Когда вы используете z-index из -1, элемент размещается ниже всех элементов, включая его родительский элемент. Обновление до z-index: 0 а также position: relative / z-index: 1 на перекрывающемся контейнере исправляет это. Только элементы, которые расположены, работают с z-index имущество.