CODEWITHSUNDEEP
css
Ben Daggers
Ben Daggers

Reputation: 992

Z-Index for Sticky Navigation is not working

I'm developing my own theme with a sticky navigation that float in front of the content of the page.

My problem is even if I added this code, the stickynavigation div is still behind the wrapper.

.stickynavigation {
    width: 100%;
        margin: auto;
        position: relative;
        z-index: 9999;
        background: #FFF000;
        border-top: 2px solid #000;
        border-bottom: 1px solid #f1f1f1;
        display: block;
        min-height: 60px;
        padding: 10px 0;
}

.wrapper {
        max-width:1000px;
        width:95%;
        margin:0 auto;
        position:relative;
        z-index: 0 !important;
}

.stickynavigation - contains the small logo and the navigation

.wrapper - contains the <?php the_contents();?>

any idea how to make it work? To make the Stickynavigation in front of all elements?

You may see my website with the issue i'm talking about here - https://thepassport.ph/how-to-apply-for-philippine-passport/

enter image description here

Thank you very much and appreciate everyone's help.

Upvotes: 0

Views: 582

Answers (1)

Hanif
Hanif

Reputation: 3795

You need apply z-index on sticky-wrapper div like following:

.sticky-wrapper.is-sticky {
  position: relative;
  z-index: 999;
}

Explanation: By default browsers set z-index order higher in last element and lower in first element in same sibling.

Suppose you have 3 elements in same sibling like following order then browser treat them:

<div>Element 1</div> // z-index: 1
<div> // z-index: 2
    Element 2
    <div>Sub element 1</div> // z-index: 1
    <div>Sub element 2</div> // z-index: 2
</div>
<div>Element 3</div> // z-index: 3

From above structure it is dose not matter how much z-index you set on Sub element 1 element it will never come up above on Element 3 until you set higher z-index explicitly in Element 2. Because z-index always compare first on sibling elements.

Also keep it mind to work properly z-index it is recommended to use position: relative, absolute, fixed, sticky etc.

Upvotes: 1

Related Questions