Ввод кнопок и ссылок над particle.js script (Z-index)

Я пытаюсь использовать particle.js script, поэтому частицы будут плавать по всей странице (с прозрачным фоном). Мне нужно вытащить некоторые из ссылок и кнопок над частицами, поэтому они будут доступны для просмотра.

Что касается ссылки могу ли я добавить большой элемент "С" над большим элементом "В" , имея небольшой элемент "b" большой элемент "C" ?

Я думал, что относительный означает z-индекс относительно его родителя, а если бы я установил все элементы в абсолютный, отображение небольшого "b" над большим "C" было бы возможно, но это не так. Может ли кто-нибудь объяснить это мне?

<div id="A">A<div id="a">a</div></div>
<div id="B">B<div id="b">b</div></div>
<div id="C">C<div id="c">c</div></div>

Ответ 1

Что я хотел бы предложить, укажите высокий z-индекс для вашего a (например, z-index:9999;), но убедитесь, что родительские элементы a не имеют меньших значений z-индекса, потому что z-индекс элемента будет ограничено значением, заданным его родителем.

Итак, для вашего вопроса " я могу поместить большой элемент" C "над большим элементом" B ", имея небольшой элемент" b "над большим" C "элементом?", ответ нет, потому что z-индекс вашего небольшого элемента "b" будет ограничен его родителем, который является большим элементом "B", а большой элемент "B" находится ниже элемента "C".

Здесь работает рабочий образец с .container, показывающий ниже частиц при наличии ссылки. Важно то, что вы должны иметь это:

a{
    position:relative;
    z-index:9999;
}

И убедитесь, что родительский (в данном случае, .container) должен иметь значение z-индекса 9999 или больше (или любое значение, большее z-индекса шаблона), в противном случае это ограничит z- индекс a, и если он ниже z-индекса шаблона, кнопки не будут доступны для кликов.

Если у вас есть кнопки с сплошными фонами, я бы рекомендовал установить стиль для псевдоэлемента для a с более низким индексом z, чтобы разрешить появление шаблонов на нем, сохраняя при этом кликабельность самой ссылки a.

Ответ 2

Позиция не относится к z-индексу. Он относится к позиции x, y на экране. Читайте о свойстве позиции css здесь.

z-index - это просто абсолютное положение на оси z. Поэтому более высокий индекс складывается на более низком уровне.

Позиция все же влияет на ось z для divs вне вашего div, так как разные значения подразумевают разные порядки визуализации. Вы можете увидеть этот эффект, если вы откроете инструменты для создания хрома на странице, которую вы указали, и измените A от статического на относительный.

Хотя A имеет индекс 37, он будет выше B, потому что он отображается после A. Для того, чтобы z-index работал надежно, вы должны складывать их друг в друга.

Если вы откроете пример частица codepen и откройте инструменты разработчика Chrome, вы можете увидеть, как поле FPS ведет себя странно, если вы нажмете на детали. Это значит, что он находится за пределами частицы .js div.

В общем, если вы хотите посмотреть, что происходит, используйте что-то вроде инструментов разработчика в chrome. У Firefox, Opera и IE есть похожие инструменты.

Вот рабочий пример codepen. Добавьте класс в ваш css и поместите div на страницу:

.test { 
  index: 50;
  top: 100px;
  position: absolute;
}