Z索引不起作用；不知道为什么。

Question

我有一个测试环境，并且z-index出于某种原因无法正常使用该网站。我尝试过的位置：相对；在大多数元素上，但不确定为什么它不起作用。

由于它是使用视觉生成器制作的，因此DOM结构非常混乱。

http://104.236.219.66/reachchina/

这是网站。

这是有问题的部分：

它位于卡片的各个部分中：卡片不在橙色“散落的墨水”背景的顶部，并且墨水悬停在卡片上。

有人知道为什么它不起作用吗？

谢谢。

Answer 1

您有一个div，它是卡片的容器， 一格是污渍的容器。

如果要使用z-index确保卡盒位于污渍盒上方，则需要指定它。使用position: relative/absolute/fixed;仅激活z-index的功能，但默认设置为0。

要解决此问题，只需将z-index: 1;添加到卡盒中即可。

不幸的是，您尚未提供可编辑的演示。您应将z-index: 1;添加到的div是.vc_row wpb_row.vc_row-fluid，比#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>

Answer 2

css中固定有一个高度 .card-text.home p { height: 180px; }

您必须将其更改为min-height，并将框高度设置如下：

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

Answer 3

Itay Ganor在上面写了完美的答案。他详细描述了该问题，并通过一个一般示例对其进行了简化。

我试图根据页面来源写出答案。请按照以下说明操作，它应该会为您工作。

1. 用于放置主题面板或子主题样式的CSS代码。css：

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

2. 清除缓存。

3. 再次查看页面。

---

浏览器代码视图

---

浏览器前视图