160

How do I make an html div tag to be on top of everything? I tried adding z-index: 1000, but it remains the same.

1

7 Answers 7

165

In order for z-index to work, you'll need to give the element a position:absolute or a position:relative property. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.

2
  • 1
    I wanted to use a fixed scheme and so I kept the position as fixed but still set the z-index to 1000 and got the desired results, it covered a div lower on the page as I scrolled, can you explain why that happened even though I was using a static position?
    – Boo89100
    Jul 28, 2016 at 15:51
  • Another thing that can cause element A to appear "below" element B is if element A spills outside its parent P's bounding rectangle (and spills into B's bounding rectangle) and P's style is set to "overflow:hidden".
    – Pi Da
    Nov 28, 2020 at 14:11
100

Yes, in order for the z-index to work, you'll need to give the element a position: absolute or a position: relative property... fine.

But... pay attention to parents!

The element's z-index may be limited by its parent's z-index value.

You have to go down the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.

All other descendants can never be in the foreground if at the base there is a lower definite z-index.

In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.

This is because div1-1 has a z-index greater than div1-2.

enter image description here

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}
<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>

More simply :

enter image description here

3
  • In your example the root parent div div1 has a defined z-index of 1, that would mean all children can only have z-index of 1. But clearly div1-1 is infront of div1-2.
    – Binarian
    Nov 23, 2021 at 11:32
  • Thanks a lot! The parent div had a lower z-index in my case. Apr 12, 2022 at 21:02
  • 2
    Is there any way around this even if the z-index is set different in the parents? anyway to override this? Jun 20, 2022 at 17:26
49

For z-index:1000 to have an effect you need a non-static positioning scheme.

Add position:relative; to a rule selecting the element you want to be on top

0
16

You need to add position:relative; to the menu. Z-index only works when you have a non static positioning scheme.

0
13

z-index property enables you to take your control at front. the bigger number you set the upper your element you get.

position property should be relative because position of html-element should be position relatively against other controls in all dimensions.

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}
5

I gonna assumed you making a popup with code from WW3 school, correct? check it css. the .modal one, there're already word z-index there. just change from 1 to 100.

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
4

It seems like nesting an element inside a <dialog> element puts it on top of everything. It is placed both horizontally and vertically centered to the screen if you use showModal() but you lose the interactivity with other elements in the page.

document.querySelector("dialog").showModal();
<dialog>
  <div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>

If you still want interactivity with the background elements, you can use the show() method. It is placed only horizontally centered to the screen.

document.querySelector("dialog").show();
<dialog>
  <div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.