CODEWITHSUNDEEP
htmlcss
dragonfly
dragonfly

Reputation: 17783

Element in td with position:relative overlaps on another position:fixed element

I have a mystery to solve: on my web page there's a fixed top panel div (similar to gmail's top panel). Below, I have a table with several cells, and the last cell is defined like this:

<td class="col-time">
    <div title="średnie: 180, maksymalne: 186, minimalne: 142" class="hr-avg">
        <span>180 (89%) </span>/ <span class="hr-max">186 (92%) </span>
    </div>
</td>

The hr-avg applies position:relative style.

Issue is: when scrolling, table is hidden under that top panel (panel's opacity is 1). But what suprises me is that cell defined with position:relative style doesn't hide under panel. Panel & cell's content overlap (it gives the effect like top panel has opacity only for that cell). Could somebody explain that behaviour?

Thanks,Pawel

Upvotes: 1

Views: 1442

Answers (1)

Kokos
Kokos

Reputation: 9121

This should be fixed by giving your top panel div a z-index which is higher than anything that has to be below it.

The reason this only occurs with the hr-avg is because it's (probably) the only element apart from the top panel that has a position other than static. And then because it appears after the top panel in your HTML it will be stacked on top of it by default (since they both have no z-index).

Setting the z-index of the top panel to a high number like 99999 should fix your problem (the high number is so you can still stack things in your content without going above the top panel).

Upvotes: 7

Related Questions