CODEWITHSUNDEEP
htmlcsscss-positionmobile-safariabsolute
Wedmich
Wedmich

Reputation: 169

Absolute positioned element is not above other absolute positioned elements in Safari iOS

I have a table with dropdowns enter image description here

Dropdown and header of the table are absolute-positioned.

Dropdown has "z-index: 20" Header has "z-index: 10" "top" and "left" properties of dropdown are set in code.

here are styling of dropdown and header 

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translateZ(1px);
        z-index: 10000;
 }

Dropdown should be above the table header.

The issue appears only in Safari on iOS devices - dropdown is under the header. Does anyone know how to solve this problem?

Upvotes: 2

Views: 2654

Answers (2)

Wedmich
Wedmich

Reputation: 169

I found out what was the problem. It was because on complicated layout with lot's of styles.

The drop down actually was rendered, but part of dropdown was invisible (seems like as it was overlapped by other div-blocks) but user still could interact with that invisible part.

The problem was that one of the outer parent div-containers has property -webkit-overflow-scrolling: touch; So while rendering Webkit in Safari hid part of dropdown. So I delete that property but left -webkit-transform: translate3d(0, 0, 0); to dropdown and everything started to work great!

Upvotes: 4

vijay
vijay

Reputation: 63

I think you are using z-index & translate3d both on your dropdown. So, When you are using translate3d, then z-index can't be accounted for anymore.

Try below,

.data-table-head {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex: 0 0 auto;
    height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 12;
}  

 .custom-select-list {
        position: absolute;
        margin: 34px 0 0 0;
        min-width: 84px;
        font-weight: normal;
        right: 15px;
        z-index: 10000;
 }

Upvotes: 0

Related Questions