CODEWITHSUNDEEP
cssgoogle-chromecss-positionz-index
Raghavan
Raghavan

Reputation: 11

Scrollbars overlapping DIVs at higher Z-index only in chrome

I have an absolutely positioned div with z-index defined on it. In this div there is a fixed child div with a z-index defined on it as well. I want the fixed div to be on top of his parent.

In all other browsers this renders fine but in chrome when the parent div has a scrollbar, it appears on top of its child. Here is a CodePen.

Adding transformX(0) on the parent div will not help in my case as the child div would confine in the parent. Any help on this is much appreciated. I only found this issue in the Chrome Help Forum but it has not been answered.

Upvotes: 1

Views: 4392

Answers (1)

rmarif
rmarif

Reputation: 548

Apply z-index using webkit engine. Hope it will fix the issue

.abs::-webkit-scrollbar {
 z-index:10;
}

Upvotes: 1

Related Questions