CODEWITHSUNDEEP
htmlcss
Adam
Adam

Reputation: 6122

CSS I want a div to be on top of everything

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.

Upvotes: 167

Views: 448589

Answers (7)

m4n0
m4n0

Reputation: 32255

Edit: If there are z-index assigned to other elements on the page, then you need to adjust z-index value for the dialog element too.

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>

Upvotes: 4

A. Morel
A. Morel

Reputation: 10344

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

Upvotes: 123

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

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

Upvotes: 50

KhmerNews Tech
KhmerNews Tech

Reputation: 49

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 */
}

Upvotes: 4

Vikrant Kashyap
Vikrant Kashyap

Reputation: 6836

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.
}

Upvotes: 13

Skylar Anderson
Skylar Anderson

Reputation: 5703

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.

Upvotes: 175

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

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

Upvotes: 16

Related Questions