Блог

Главная - Вопросы по программированию - Не удается заставить элемент перекрывать другой

Не удается заставить элемент перекрывать другой

#css #wordpress #element #overlap

#css #wordpress #элемент #перекрытие

Вопрос:

У меня есть сайт Divi WordPress http://linden .flywheelsites.com и я пытаюсь получить идентификатор элемента «atlas_menu1», чтобы он перекрывал все остальные элементы на странице. Каким-то образом элемент «et-page-area» или «main-content» по-прежнему перекрывает atlas_menu1.

Может кто-нибудь взглянуть на инспектор страниц и посмотреть, сможете ли вы найти решение? Я могу предоставить доступ, если это необходимо.

Ответ №1:

Рассмотрим свойство CSS z-index

Комментарии:

1. У меня, независимо от того, что я сделал со всеми остальными элементами, имеющими более низкий z-индекс, а один atlas_menu1 выше, приводит к тому же.

2. @MatthewWalker В каком браузере вы тестируете, потому что я не смог воспроизвести его с помощью Chrome или Safari.

Ответ №2:

Не могли бы вы взглянуть на .et_pb_text_3? У него есть display: none. Извините за этот ответ. Я пока не могу комментировать.

Ответ №3:

Помните, что элементы с z-индексом «работают» только тогда, когда они находятся на одном уровне.

Например:

 .parent{position:absolute;width:100px;height:100px;}
.child{background:red;position:absolute;width:50px;height:50px;margin:auto;top:0;right:0;bottom:0;left:0;z-index:999999;}
.first{z-index:1;background:blue;}
.second{z-index:2;left:50px;top:50px;background:yellow;}
.third{z-index:3;left:100px;top:100px;background:green;}
.fourth{z-index:4;left:150px;top:150px;background:purple;}  
 <div class="parent first">
  <div class="child"></div>
</div>

<div class="parent second">
  <div class="child"></div>
</div>

<div class="parent third">
  <div class="child"></div>
</div>

<div class="parent fourth">
  <div class="child"></div>
</div>

Весь дочерний класс имеет z-индекс 999999, однако родительский класс с меньшим z-индексом остается на вершине дочернего. Это потому, что после того, как у вас есть вложенные элементы с z-индексом, дочерний элемент не может перекрывать родительский элемент.

В вашем случае #atlas_menu1(z-index:9999) находится внутри .et_pb_row_2(z-index:1) того, что находится внутри .et_pb_section_4(z-index:-1)

Попробуйте удалить .et_pb_section_4 и .et_pb_text_3 z-index, затем установите .et_pb_row_2 z-index равным 99999.