CODEWITHSUNDEEP
htmlcss
GeForce RTX 4090
GeForce RTX 4090

Reputation: 3498

Z-index not making an element appear above others

Here I have a small example of a modal, and I've added z-index: 1000 to a button. 

  <button type="button" class="btn btn-info btn-lg" style="z-index: 1000" data-toggle="modal" data-target="#myModal">Open Modal</button>

Why doesn't the button appear above the modal? Or am I totally misunderstanding the z-index property?

https://www.w3schools.com/code/tryit.asp?filename=G22NNMWCE9PS

P.S. Click "Run" to show the result of the code. Click "Open modal" to open the modal

Upvotes: 0

Views: 2007

Answers (4)

Palash Karia
Palash Karia

Reputation: 700

So, there are 2 issues here:

  1. the modal has a z-index of 1050, you are using 1000.
  2. Even if you use, say: 1051, it won't work because you need a positioned box [*] (i.e, the position CSS property should be something other than static.). In this case, you can use position: relative; along with z-index: 1050;

Here's an updated JSBin for reference:

https://jsbin.com/pozilemefa/edit?html,output

[*] Z-index on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index. It says:

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one

Side note: I'd suggest using MDN, over W3schools, for as your go to web reference . (I personally use this chrome extension called Hide W3schools to hide all those results from google searches.)

Upvotes: 1

Markus
Markus

Reputation: 4149

Try

<button type="button" class="btn btn-info btn-lg" style="z-index: 1051;position: relative;" data-toggle="modal" data-target="#myModal">Open Modal</button>

The model has z-index: 1050, so the button must have a higher z-index. By default a button has position: static;. Z-index only works on positioned elements (position:absolute, position:relative or position:fixed).

Upvotes: 1

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Z-index requires positioning. Add position: relative; to the button. You will also need to increase the z-index value as the modal has z-index: 1050; and the button needs a higher value to appear above the modal layer.

Upvotes: 1

Hicka
Hicka

Reputation: 155

I think Bootstrap already places the modal above z-index: 1000 (I don't know where exactly), and what you wanna do works with z-index: 2000;. The button also needs to be in position: relative

Upvotes: 1

Related Questions