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

Question

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

由于是用visual builder做的，DOM结构比较乱。

http://104.236.219.66/reachchina/

这是网站。

这是有问题的部分:

它在有卡片的部分:卡片不在橙色“泼墨”背景的顶部，墨水悬停在卡片上。

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

提前致谢。

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 .

您也可以查看演示，希望它能最好地反射(reflect)您的问题:

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