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?