1

I have 2 elements, one with this css:

{
    background: #f5f5f5;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    right: 0;
    left: 300px;
    height: 75px;
    z-index: 3;
}

and another one with this css:

{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
}

Element number 1 is above element number 2. How is that possible? I don't know what to do, if I set z-index of element 1 to 0, it is okay, but then element 1 is bellow other elements and it should not be. Basically element 1 is header menu and element 2 is whole screen popup.

Could anyone help?

Nikola Pejic
  • 145
  • 1
  • 12
  • You need to read the accepted answer to this : [z-index not working with fixed positioning](https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) – Xavier C. Mar 09 '19 at 17:32
  • share the html code, CSS is useless alone and we cannot give the *why* – Temani Afif Mar 09 '19 at 19:39

2 Answers2

0

In the Box Model, z-index is an ordering of overlapping two-dimensional objects. Geometrically speaking, z-index is the perpendicular z-axis that intersects the coordinates y-axis and x-axis.

The visibility of stack order elements depends on their values. The elements with high value has high precedence of visibility and therefore it overlaps other elements in the Box Model and the element with lower precedence will yield. However, this requires the positoning of elements in the Document Object Model (DOM).

The DOM can only render an element with the relative, absolute and fixed position property not static. It does not require the element to be placed on top for higher visibility nor does it require to be at the bottom for lower visibility. As long as the element has a high value the z-index order, all the other elements will yield. Meaning it will have the high precendence to be displayed on top of the others. For example the z-index of the value of 1 has a high precedence on the one with value of 0.

If the element-1 has z-index of 1 and element-2 has a z-index of 0, the element-1 will have the higher precedence and it will be on top of the order and the element-2 will yield because of its lower precedence.

This is the answer of your question. You are asking: "Element number 1 is above element number 2. How is that possible?"

As I said above. It does not matter what is above or what is below. What matters is the value of the z-index precendence.

In your case, you placed the element-1 with z-index: 3 above and the element-2 with z-index: 1000 below thinking that the element-1 will have the high precence because of its DOM position. That's wrong. You have to understand that HTML Sementic structures the DOM but CSS styles it or gives it a new look and feel.

With z-index we are dealing with CSS not HTML. Here we don't structure elements, we style them instead.

With your codes above, the element-2 with z-index: 1000 has the higher precedence and it is the one that must be on top of the other regardless its DOM position.

Lawrence E Bosumbe
  • 488
  • 7
  • 16
  • You are explaining what the OP is expecting (check the z-index of his element). OP want to know why an element with low z-index is above another one with higher z-index – Temani Afif Mar 09 '19 at 19:38
0

thank you for your help, I've figured out the issue. For some reason, it actually had nothing to do with css. What I did in order to fix it was this:

Entire html structure was like this:

<div container>
    <div element 1></div>

    <div content>
        <div element 2></div>
    </div>
</div>

changing the structure to this done the trick:

<div container>
    <div element 1></div>

    <div content>
    </div>
</div>

 <div element 2></div>

I don't know why, so I would appreciate if someone has an explanation for it. I did not change css at all! However, I will leave this question for anyone who might have similar issues.

Thanks again!

Nikola Pejic
  • 145
  • 1
  • 12