CODEWITHSUNDEEP
cssz-index
Akhil Paul
Akhil Paul

Reputation: 721

z-index not working on safari

I stopped at safari with a z-index bug and can't move forward, tried almost all possible ways, since my code has not giving me enough freedom to edit because the code has used several other pages.

I'm coming on the issue, my site in mobile view all browsers except in safari main menu goes just below the heading tag that has z-index and positioned to get a cut off feeling from the header image here you can see...

enter image description here

enter image description here

enter image description here

and here you can see the css

Header --------- section

.fusion-header-wrapper {
    background: rgba(0, 0, 0, 0) url("wp-content/uploads/2015/10/bg-1-34-8.jpg") repeat scroll center top / cover !important;
    height: 335.5px;
    width: 100%;
}
.fusion-header-wrapper {
    position: absolute !important;
    width: 100% !important;
}
.fusion-header-wrapper {
    z-index: unset !important;
}
.fusion-header-wrapper {
    z-index: 1;
}
.fusion-header-wrapper {
    position: relative;
    z-index: 10010;
}

Items Heading -----------

.footer-press-title {
    padding-bottom: 30px !important;
}
.fusion-imageframe {
    z-index: 1;
}
.fusion-imageframe {
    display: inline-block;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

Upvotes: 1

Views: 8399

Answers (1)

Melvinr
Melvinr

Reputation: 534

Looks like the positioning absolute !important; in .fusion-header-wrapper class is affecting the stacking context.

Remove the absolute !important;

To read more about Stacking Context see the Example section in https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Upvotes: 1

Related Questions