Z-индекс не работает;не могу понять почему.

Question

У меня есть тестовая среда, и z-index по какой-то причине не работает для веб-сайта.Я попробовал положение: родственник;на большинстве элементов, но не уверен, почему он не работает.

Поскольку это было сделано с помощью визуального компоновщика, структура DOM довольно грязная.

http://104.236.219.66/reachchina/

Этоэто веб-сайт.

Это часть вопроса:

Это в разделах с картой: карты нена верхней части оранжевого «пролитого чернил» фона, и чернила парят над карточками.

Есть идеи, почему это не работает?

Заранее спасибо.

Answer 1

Существует фиксированная высота в css .card-text.home p { height: 180px; }

, вам нужно изменить ее на min-height и установить высоту вашего бокса, как показано ниже:

.card-text.home p { min-height: 180px; }

Answer 2

Итай Ганор написал отличный ответ выше.Он подробно описал проблему и упростил ее на общем примере.

Я попытался написать свой ответ на основе источника страницы.Следуйте приведенным ниже инструкциям, и он должен работать для вас.

1. Код CSS для размещения на панели темы или в стиле дочерней темы style.css:

   .ult-carousel-wrapper .slick-slider { z-index: 1; }

2. Очистить кеш.

3. Просмотреть страницу еще раз.

---

Просмотр кода браузера

---

Вид спереди браузера

Answer 3

У вас есть один div, который является контейнером для карточек, и один div, который является контейнером с пятном.

Если вы хотите убедиться, что контейнер для карточек находится над контейнером с пятном, используя z-index, вам нужно это указать.Использование position: relative/absolute/fixed; только активирует функциональность z-index, но по умолчанию оно равно 0.

Чтобы решить эту проблему, просто добавьте z-index: 1; в контейнер для карточек.

К сожалению, вы не предоставили редактируемую демонстрацию;div, к которому вы должны добавить z-index: 1;, равен .vc_row wpb_row.vc_row-fluid, на один div выше #services-section.

Вы также можете проверить демонстрацию, надеясь, что она лучше всего отражает вашу проблему:

#circle {
  /* this is the required property */
  z-index: 1;
}


#circle {
  width: 200px;
  height: 200px;
  background: white;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  border-radius: 150px;
  margin: 50px;
  
  position: relative;
}


#square {
  
  width: 200px;
  height: 150px;
  background: #7db620;
  top: 200px;
  
  position: absolute;
  z-index: 0;
}

  <div id="circle"></div>
    
  <div id="square"></div>