Dheeraj Agrawal Dheeraj Agrawal - 4 months ago 19
CSS Question

z-index position absolute vs fixed

I have a tabular view whose thead is fixed and web's header and filter section is also fixed, so filter section contains a bootstrap dropdown whose z-index is 1000 & thead's z-index is 1 but still that dropdown is going behind it, below is the screenshot:

enter image description here

Here sortby (

position: absolute; z-index:1000
) is going behind that fixed header (
position: fixed; z-index:1
)

Edit: Fiddle

Answer

thead z-index:1 and drop-down z-index:9; works, try and adjust it's top and margin values too.

.inline-edit > thead {
    position: fixed;
    width: 100%;
    z-index: 1;
    background: #FFFFFF;
    top: 150px;
}
.inline-edit thead > tr {
    display: block;
}
.inline-edit thead > tr > th {
    display: block;
    float: left;
}
.inline-edit > tbody {
    width: 100%;
    display: block;
    margin-top: 78px;
}

.top_filter {
    padding: 15px 20px;
    margin-bottom: 10px;
    position: fixed;
    width: 100%;
    z-index: 9;
    top: 54px;
    background: #FFFFFF;
}
Comments