How is Apple applying overflow:hidden to elements inside of position:fixed? - html

Question

Based on my own tests and researching the topic on the internet, elements with position: fixed don't respect a parent element's overflow: hidden property. This includes children of the fixed position element — because they are within the fixed positioned element, they don't respect the ancestor's overflow: hidden property either.
However, Apple is somehow getting around this on Apple Music
Containing element with overflow: hidden
Inner element with position: fixed
The phone itself
You can see by the blue highlight in the second image that the fixed positioned element does indeed overflow its container, as does the phone inside it (3rd image). Yet, the contents of the fixed positioned element (the phone) still gets clipped by the ancestor with overflow: hidden. Using Chrome's dev tools, if I remove the overflow: hidden property from that ancestor, the entire phone indeed appears.
How is Apple doing this? I have tried recreating it with the same combination of fixed, relative, overflow, etc. settings, but I'm clearly missing something because I haven't been successful.
UPDATE
As #user3790069 points out in his answer, a fixed positioned element can be clipped by a relatively positioned one if the relatively positioned element has a higher z-index, or simply comes after the fixed position one (and is thus given a higher z-index by default). However, in the Apple Music example, the overflow: hidden property still seems to be the key they're relying on. To test this, I removed a bunch of the DOM to reduce clutter. What we're left with in the following screenshots are:
a) a containing section element with overflow: hidden
b) inside of that, a position: fixed element.
In the first screenshot, you'll see that the phone is clipped. In the second screenshot, I removed the overflow: hidden property and suddenly the overflowing part of the phone becomes visible.

Answer 1

First of all, I'm going to explain why aren't fixed children clipped by overflow: hidden on their parent. A box B is clipped by overflow applied to its ancestor A only if A is the containing block of B. But the containing block of a fixed element isn't a simple ancestor; a containing block of something with position: fixed is the whole wiewport.
I think that the fixed elements on the linked page aren't really cut by overflow; they're rather hidden under other positioned elements.
An exemple:
<div id=cont>
<div style="background: red">
<div class=fixed></div>
</div>
<div style="background: yellow">
<div class=fixed id=second></div>
</div>
<div style="background: green"></div>
</div>
#cont {
height: 5000px
}
#cont > div {
height: 200px;
position: relative
}
.fixed {
width: 100px;
height: 100px;
background: black;
position: fixed;
right: 20px;
top: 20px
}
#second {
top: 240px
}