How to display dialog above all other dialog?

Question

I am developing website which open 3 dialog boxes like first dialog box open second dialog box & second dialog box opening third dialog box.

Current problem is that my third dialog box hiding under second dialog box but I want to show my third dialog box above all other dialog boxes.

I have created dialog boxed using bootstrap modal.

I have already tried to set position using html & css but not working so is there any way so that I can set perticular dialog above all just using one line.

Answer 1

Hi use zindex css property for that

.box-wrap{
	position: relative;
}
.box {
    position: absolute;
}
.box-1 {
    width: 600px;
    height: 450px;
    background-color: #e5e5e5;
    z-index: 9;
}
.box-2{
    width: 400px;
    height: 300px;
    background-color: #d0d0d0;
    z-index: 91;
}
.box-3 {
    width: 200px;
    height: 200px;
    background-color: #000;
    z-index: 99;
}

<div class="box-wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>

Answer 2

The z-index property specifies the stack order of an element.

you can set z-index properly to maximum it's maximum value compare to other dialog.

element with greater stack order is always in front of an element with a lower stack order.

z-index only works on positioned elements.

<div style = "z-index:2000;">