0

I am having an issue with z-index stacking. The below div is appearing over the top of the top div even when z-index and positions state the below div should be under the div above it.

I have provided a JSFiddle of an example with the code that I am using.

https://jsfiddle.net/6hewonhb/

.above-box {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgba(251, 47, 111, 0.2);
    color: #fff;
    z-index: 10 !important;
    position: relative !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    height: 100px;
    width: 100px;
}

.below-box {
    margin-top: -20px !important;
    margin-left: 70px !important;
    position: relative !important;
    z-index: 5 !important;
    background-color: #f00;
    height: 100px;
    width: 100px;
}
<div class="above-box">
    TEST
</div>

<div class="below-box">
    TEST
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
ALN90
  • 41
  • 5
  • your codes are working perfectly fine...because your opacity is low its showing like this – Gaurav Aggarwal Mar 21 '16 at 12:01
  • Thank you for the help. It actually works in the fiddle but not on my website. '.below-box' is actually an image on my website and '.above-box' has some text with a link inside of it that this image is covering. Even when I change the rgba to 1, the image in below box is still covering the link. If it helps, I am using WordPress with Visual Composer and '.below-box' is in the row below '.above-box' – ALN90 Mar 21 '16 at 12:51
  • Hi ALN90, unfortunately you need to create a Minimal, **Complete**, Verifiable Example. Your example is not a complete reproduction of your issue. Please copy enough code from your site to the JSFiddle to reproduce the real problem or we won't be able to answer this question. – TylerH Mar 21 '16 at 13:53

1 Answers1

2

It is actually working. Be careful about your RGBA values of the .above-box div.

The fourth value is the opacity parameter, here opacity is set to 1 : 

background:rgba(251,47,111,1);

See this fiddle

Besides, it is not needed to add !important; almost everywhere in the CSS code.

EDIT : For your issue, please double check positions of each of these elements in the DOM before adding z-index property. z-index property works fine with elements which are in the same level in DOM document.

Like this example

Also, you can read this very good explanation of z-index on this post : Z-Index Relative or Absolute?

Hope that helps.

Community
  • 1
  • 1
Vincent G
  • 8,547
  • 1
  • 18
  • 36
  • Thank you for the help. It actually works in the fiddle but not on my website. '.below-box' is actually an image on my website and '.above-box' has some text with a link inside of it that this image is covering. Even when I change the rgba to 1, the image in below box is still covering the link. If it helps, I am using WordPress with Visual Composer and '.below-box' is in the row below '.above-box' – ALN90 Mar 21 '16 at 12:50
  • Maybe update the fiddle with a more look-a-like code of your issue and I will try to fix it and explain it to you :) You can also do a screenshot of the issue. – Vincent G Mar 21 '16 at 13:11
  • The fiddle will be too difficult to display because of the rows, cols, classes etc. The screenshot of the issue: http://thenewsomeway.co.uk/zindex-problems.jpg the text box css is: { padding-left: 50px; padding-right: 50px; padding-top: 20px; padding-bottom: 20px; background:rgba(251,47,111,0.2); color: #fff; z-index:10!important; position:relative!important; margin-top: -200px !important; margin-right: 500px !important; margin-left: -260px !important; } The image css is: { margin-top: -350px !important; margin-left: 70px !important; position:relative!important; z-index:5!important; } – ALN90 Mar 21 '16 at 13:27