0

I got a list of items and, without position: absolute, they render correctly like this:

Correct Render Without Absolute Positioning

Now, I do want to set position: absolute, to place my container on top of the header (where it says "Sablier").

Yet, it hides the elements that are below the screen:

Flawed Render With Absolute Positioning

I set z-index: 1000; on the container and made sure there's no other container on top of it. What's wrong?

Notes:

  1. It only happens on iOS.
  2. I don't want to set bottom: 0 because the list may expand beyond the screen's height.
Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114

2 Answers2

0

if you add position absolute to header and want to see it, you should add padding-top for list by height of your header. Why do you add position absolute for header? Maybe you need position fixed?

arkan4ik92
  • 71
  • 5
  • No, I add the `position: absolute` to the container. The head is kept in the normal flow - on desktop, the container is not absolutely positioned. – Paul Razvan Berg Nov 10 '19 at 13:04
0

You need to take the whole container out of the header. Absolute positioned element will check its parent and position itself accordingly. Take out the container and place it somewhere else such a way that its parent is the body of the html.

PopGlintz
  • 15
  • 4
  • The container is not within the header. I found out in the meantime that the issue caused by `z-index` and iOS' added stacking context when using `-webkit-scrolling-overflow: touch`. Will post an answer if I find a solution. – Paul Razvan Berg Nov 10 '19 at 13:41
  • Does that mean you don't want it to scroll while others are scrolling? Then use position: fixed instead of absolute. – PopGlintz Nov 10 '19 at 13:44
  • No, it's not about parallel scrolling. It's a rather quirky behaviour in iOS: https://stackoverflow.com/questions/37696746/ios-not-respecting-z-index-with-webkit-overflow-scrolling – Paul Razvan Berg Nov 10 '19 at 13:45