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

Question

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:

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.

Answer 1

You have one div which is the container of the cards, and one div which is the container of the stain.

If you want to make sure the card container is above the stain container using z-index, you need to specify it. Using position: relative/absolute/fixed; only activates the functionality of z-index, but it is set to 0 as default.

To solve this, just add z-index: 1; to the card container.

Unfortunately, You have not supplied an editable demo; the div that you should add z-index: 1; to is .vc_row wpb_row.vc_row-fluid, one div above #services-section.

You can also check out the demo, hope it best reflects your issue:

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