时间戳

首页 > 解决方案 > Z-index is not working; can't figure out why.

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

问题描述

I have a test environment, and the z-index is not working for some reason for the website. I have tried position: relative; on most elements but not sure why is it not working.

Since it was made with a visual builder, the DOM structure is quite messy.

http://104.236.219.66/reachchina/

This is the website.

This is the part in question:

The part in question

It's in the sections with the card: the cards are not on the top of the orange "spilled ink" background, and the ink hovers over the cards.

Any idea why is it not working?

Thanks in advance.

标签： htmlwordpresscssz-index

解决方案

你有一个 div 是卡片的容器，还有一个 div 是污渍的容器。

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

要解决这个问题，只需添加z-index: 1;到卡片容器中。

不幸的是，您没有提供可编辑的演示；您应该添加的divz-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>

推荐阅读