How does Apple apply overflow: hidden for elements inside position: fixed?
Based on my own tests and researching the topic online, elements with position: fixed
do not respect the property of the parent element overflow: hidden
. This includes the child elements of the fixed
position element - because they are inside the element fixed
, they don't respect the ancestor property either overflow: hidden
.
However, Apple somehow got around this on Apple Music.
Containing element with overflow: hidden
Inner element with position: fixed
Phone itself
In the second image you can see the blue highlight that the element is fixed
positioning is indeed overflowing its container, just like the phone inside it (3rd image). However, the content of the positioned element fixed
(phone) is still clipped by the parent with overflow: hidden
. Using Chrome dev tools, if I remove a property overflow: hidden
from this ancestor, the whole phone actually appears.
How does Apple do it? I tried to recreate it with the same combination of fixed, relative, overflow, etc. settings, but I am clearly not seeing something because I was not successful.
UPDATE
As @ user3790069 points out, an positioned element fixed
can be clipped relatively positioned if the relatively positioned element is higher z-index
or just comes after position fixed
one (and thus defaults to a higher z-index). However, in the Apple Music example, the property overflow: hidden
is still the key they rely on. To test this, I removed a bunch of DOM to reduce the clutter. The following screenshots remain:
a) containing an element section
with overflow: hidden
b) inside that element position: fixed
.
In the first screenshot, you will see the phone is being cropped. In the second screenshot, I removed the property overflow: hidden
and suddenly the overflowing part of the phone will become visible.
source to share
First of all, I'm going to explain why non-fixed children are circumcised overflow: hidden
by their parent. The box B is clipped overflow
, applied to its ancestor A , only when A is a block containing the B . But the containing block of the fixed element is not a simple ancestor; containing a block of something with position: fixed
is the entire wiewport .
I think that the fixed elements on the linked page are not actually cut into overflow
; they are rather hidden under other positioned elements.
Example :
<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
}
source to share