CSS 元素总是在最前面

Question

Is this possible to have element with class .myelement always on top in my HTML structure?

<div class="zindex1">
  <div class="myelement">
    want THIS element always be on top
  </div>
</div>
<div class="zindex2">
</div>

and with for example this CSS

.zindex1 {
  z-index: 1;
  background-color: blue;
  height: 100px;
  position: relative;
}

.zindex2 {
  z-index: 2;
  background-color: green;
  height: 300px;
  position: relative;
}

.myelement {
  background-color: yellow;
  height: 500px;
  width: 100px;
  position: relative;
}

NOTE: I can't change values of my z-indexes and HTML structure.

Here is full example: https://jsfiddle.net/wLzej01f/

EDIT What if all my classes will have to have position: relative? I forget to mention about it https://jsfiddle.net/wLzej01f/6/

Answer 1

The z-index CSS property won't apply to static elements:

For a positioned box (that is, one with any position other than static ), the z-index property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

More about it here .

So, you need to add:

.myelement {
    position: relative;
}

Updated JSFiddle .

Answer 2

Position: relative

 .zindex1 { z-index: 1; background-color: blue; height: 100px; } .zindex2 { z-index: 2; background-color: green; height: 300px; } .myelement { z-index: 3; background-color: yellow; height: 500px; width: 100px; position: relative; }

 <div class="zindex1"> <div class="myelement"> want THIS element always be on top </div> </div> <div class="zindex2"> </div>

Answer 3

You forgot to add

position: absolute;

or

position: relative;

as you wish.

Answer 4

Just add position:relative to .myelement :

.myelement {
  z-index: 3;
  background-color: yellow;
  height: 500px;
  width: 100px;
  position: relative;
}

DEMO

Answer 5

In case someone is trying to keep an element in a fixed position on the rest of the elements or does not know why one element is below another, keep in mind the sticky element.

https://www.w3schools.com/howto/howto_css_sticky_element.asp

Answer 6

.zindex1 {
    z-index: 1;
    background-color: blue;
    height: 100px;
    position: relative;
}

.zindex2 {
    z-index: 0;
    background-color: green;
    height: 300px;
    position: relative;
}

.myelement {
    background-color: yellow;
    height: 500px;
    width: 100px;
    position: absolute;
    z-index: 2 !important;
}


**This code works**