CODEWITHSUNDEEP
csstwitter-bootstrap
nandanself
nandanself

Reputation: 835

Put an modal div over fixed navbar

I have fixed navbar in my webpage.Now I have input box which when focused open a list of suggestion in a dialog.Now the problem I am facing is that dialog box is under the navbar and I want it to be over the navbar.

Dialog box css 

.search-overlay-container {
    position: static;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 340px;
    box-shadow: 0 0 0px;
    padding: 0px;
    background-color: #343031;
    overflow: auto;
    margin-top: -79px;
    min-height: 475px;
    max-height: 475px;
}

fixed navbar

position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

Upvotes: 1

Views: 4301

Answers (2)

Jamie Paterson
Jamie Paterson

Reputation: 446

You will need to abs position and give it minimum z-index :1031. It needs to be a higher z-index than the nav in order to not be hidden, think of it as sheets of paper that stack on top of each other. The parent needs to be position relative than all the children that have a z-index in that parent and are absolutely positioned will stack according to there z-index value, highest on top.

More information here:- https://en.wikipedia.org/wiki/Z-index

Upvotes: 0

tanenbring
tanenbring

Reputation: 780

Add a css z-index property that is higher than the nav bar. E.g.:

z-index: 1000;

Upvotes: 2

Related Questions