Z-index 不起作用；不知道为什么。

Question

我有一个测试环境，由于某种原因，网站的 z-index 无法正常工作。我试过 position: relative;在大多数元素上，但不确定为什么它不起作用。

由于是用visual builder制作的，DOM结构比较乱

http://104.236.219.66/reachchina/

这是网站。

这是有问题的部分：

它在有卡片的部分：卡片不在橙色 "spilled ink" 背景的顶部，墨水悬停在卡片上。

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

提前致谢。

Answer 1

你有一个 div 是卡片的容器，还有一个 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.

之上加一个 div

您也可以查看演示，希望它能最好地反映您的问题：

#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; }

您必须将其更改为最小高度并将您的框高度设置如下：

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

Answer 3

Itay Ganor 在上面写了完美的答案。他详细描述了这个问题，并通过一个一般的例子简化了它。

我尝试根据页面源代码写下我的答案。按照以下说明进行操作，它应该适合您。

CSS 放入主题面板或子主题面板的代码 style.css:

.ult-carousel-wrapper .slick-slider { z-index: 1; }
清除缓存。
再次查看页面。

浏览器代码查看

浏览器前视图

Z-index 不起作用；不知道为什么。

Z-index is not working; can't figure out why.

html

css

wordpress

z-index