1

I am creating a web app and I want to open a modal on a button click of sidenav bar but the modal is opening behind the sidenav bar. I tried absolute and relative positioning but it's not working either.

sidenav bar

<div class="left-nav clearfix" style="background-color:#00859d; position:relative;">

modal

 <div class="container" style="width:100%; margin-left:30%; position:absolute;">

How can I set a div over another div?

IanS
  • 15,771
  • 9
  • 60
  • 84
  • 1
    Possible duplicate of [How to overlay one div over another div](http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) – roberrrt-s Sep 12 '16 at 10:07

3 Answers3

2

Use the z-index property. Set a z-index: 1 for the nav and set a higher z-index for the modal.

Dominofoe
  • 603
  • 7
  • 18
  • 1
    I would not change the `z-index` of the sidebar, as it could break others layers. Better check with the consoler developper the actual `z-index` of the sidebar, and increasing of 1 or 2 the value and set it for the modal. – Anwar Sep 12 '16 at 10:10
1

Use the z-index on both and

and add style relative on modal and absolute on side nav bar

and set z-index on modal as 0 and as 1 on side nav bar

0

You can give model z-index:1 then it will appear front.

Ayyappan K
  • 1,111
  • 8
  • 9