I have three sections: div 1 and div 3 are at least 100vh in height, and div 2 is 50vh. I want an effect where the boxes inside div 1 and div 3 are fixed, and as you scroll, div 2 moves over them to create a nice transition. The issue is that both boxes in div 1 and div 3 are positioned the same (fixed), causing them to overlap, so I can’t see both. Since div 2 is only 50vh, at some point both div 1 and div 3 are visible, and I would like both boxes to be shown during that overlap. I tried adjusting the z-index based on position, but since both boxes are visible at the same time, this solution doesn’t work.
.div1,.div3{
height:200vh;
}
.div1{
background-color:red;
}
.div2{
background-color:green;
position:relative;
z-index:10;
height:50vh;
}
.div3{
background-color:blue;
position:relative;
}
.box{
position: fixed;
top:50%;
left:50%;
width:50%;
min-height:65vh;
max-width:350px;
transform: translate(-50%,-50%);
background-color: black;color:white;
padding:30px;
text-align:center;
}<section class="div1">
<div class="box box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae nunc ipsum. In hac habitasse platea dictumst. Cras felis tellus, malesuada sit amet elementum nec, egestas quis tellus. Duis eleifend laoreet ultrices. Nulla facilisi. Donec a purus tincidunt, mattis sem in, blandit elit. Nam tincidunt dignissim imperdiet. Quisque id dui massa. Nulla lacinia neque velit, sit amet varius risus vulputate nec. Vestibulum ultricies enim non placerat sollicitudin. Mauris commodo magna et ipsum fringilla, at placerat diam fringilla. Mauris bibendum mauris nisl, at tincidunt ex laoreet vitae. Donec luctus leo eget nulla tincidunt, quis laoreet leo cursus. Duis accumsan purus quis molestie malesuada. Cras gravida metus elit, vel auctor metus fringilla eget. Quisque gravida viverra urna, at efficitur felis ultricies dictum.
</div>
</section>
<section class="div2"></section>
<section class="div3">
<div class="box box2">
Vestibulum mollis, nunc eget commodo dapibus, tortor ipsum mollis erat, sed porta diam neque sed justo. Donec imperdiet pharetra diam, nec tincidunt arcu varius et. Morbi elementum, ipsum quis malesuada lobortis, lorem nisl consequat sem, condimentum faucibus leo arcu sed orci. Nullam interdum neque nisi, at molestie purus semper ut. Nulla a purus porttitor, efficitur odio a, suscipit ipsum. In dapibus est neque, in congue mi tempor vitae. Sed at tempus risus. Phasellus bibendum auctor orci in condimentum. Sed eleifend quis justo et iaculis. Phasellus sagittis dolor vitae magna accumsan sodales. Fusce imperdiet massa id eros suscipit fringilla. Ut feugiat mollis lorem, et rutrum leo porta dapibus. Quisque interdum consectetur odio, vel placerat odio posuere vel. Phasellus in libero dignissim, tristique velit nec, varius justo. In eget auctor augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>>Solution :
Use clip-path on the parent div to make the fixed element visible only inside their parent div.
.div1,
.div3 {
height: 200vh;
clip-path: inset(0);
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
position: relative;
z-index: 10;
height: 50vh;
}
.div3 {
background-color: blue;
position: relative;
}
.box {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
min-height: 65vh;
max-width: 350px;
transform: translate(-50%, -50%);
background-color: black;
padding: 30px;
text-align: center;
}<section class="div1">
<div class="box box1" style="background: lightblue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae nunc ipsum. In hac habitasse platea dictumst. Cras felis tellus, malesuada sit amet elementum nec, egestas quis tellus. Duis eleifend laoreet ultrices. Nulla facilisi. Donec a purus tincidunt,
mattis sem in, blandit elit. Nam tincidunt dignissim imperdiet. Quisque id dui massa. Nulla lacinia neque velit, sit amet varius risus vulputate nec. Vestibulum ultricies enim non placerat sollicitudin. Mauris commodo magna et ipsum fringilla, at
placerat diam fringilla. Mauris bibendum mauris nisl, at tincidunt ex laoreet vitae. Donec luctus leo eget nulla tincidunt, quis laoreet leo cursus. Duis accumsan purus quis molestie malesuada. Cras gravida metus elit, vel auctor metus fringilla eget.
Quisque gravida viverra urna, at efficitur felis ultricies dictum.
</div>
</section>
<section class="div2"></section>
<section class="div3">
<div class="box box2" style="background: pink">
Vestibulum mollis, nunc eget commodo dapibus, tortor ipsum mollis erat, sed porta diam neque sed justo. Donec imperdiet pharetra diam, nec tincidunt arcu varius et. Morbi elementum, ipsum quis malesuada lobortis, lorem nisl consequat sem, condimentum
faucibus leo arcu sed orci. Nullam interdum neque nisi, at molestie purus semper ut. Nulla a purus porttitor, efficitur odio a, suscipit ipsum. In dapibus est neque, in congue mi tempor vitae. Sed at tempus risus. Phasellus bibendum auctor orci in
condimentum. Sed eleifend quis justo et iaculis. Phasellus sagittis dolor vitae magna accumsan sodales. Fusce imperdiet massa id eros suscipit fringilla. Ut feugiat mollis lorem, et rutrum leo porta dapibus. Quisque interdum consectetur odio, vel
placerat odio posuere vel. Phasellus in libero dignissim, tristique velit nec, varius justo. In eget auctor augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</section>