RC5: Z-index issue with nested Div elements

Beta
#1

Perhaps I am doing something wrong.

To my knowledge, if a parent div has a relative position, a transparent color and a z-index of 1, it should be above its child elements that have relative position and the z-index of 0.

One thing to add is that my parent container has the overflow set to auto.

I have a parent Div element and two Divs nested inside:

image

My intention is to create a vertical scroll shadow using background gradient on the parent Div with background-attachment: local, local, scroll, scroll; I have it working nicely, but the scroll shadow is showing up below the nested Divs, while it should be shown above.

Changing the z-index values of the parent and the child Div elements is not returning the desired result. Am I doing something wrong, or the Div elements are not behaving like expected in HTML?

Thanks!

#2

Hi @Misho,

Thanks for reaching out about this. The Div element is very basic and pretty much just outputs a chosen DOM tag with a bunch of CSS applied directly. It’s the closest thing to working with pure HTML that we have at this point. I’m not sure I fully understand the desired effect here, and I can’t really take the time needed to create a test environment to see what might be happening. If you wouldn’t mind doing two things I think it would give us a big head start and we might be able to advise further.

  • Share a link to a page where you are trying to create this effect so we can inspect the DOM with browser developer tools and get a closer look at what’s going on.
  • Share a link to a codepen (or your sandbox of choice) where the desired effect is realized in pure HTML.

I can’t promise we’ll have a solution, but we might be able to quickly spot any differences in behavior between the two and help you get there.

1 Like
#3

Thanks @alexander,

Actually, I was basing my assumptions on a Stack Overflow reply that turned out to be incorrect. I have recreated the situation in pure HTML and got the same result as with the DIV elements. So this is no longer a possible bug report.

To elaborate what I was trying to achieve:

When elements are scrolling on mobile, a great indicator that there is a scrollable area is a scroll shadow. Google is using this extensively in their online documents, especially with scrollable html tables on mobile.

In this video, you can see my setup, and when I start scrolling the container, a shadow appears depending on which side has the scrollable area. Unfortunately, it is below the child containers, so I haven’t achieved the effect when opaque images are present in them. The desired effect is to show the shadows above the content.

Thanks!

#4

That’s awesome! Nice job. So those inner Divs, you can just build whatever you want inside them?