If you want to make the inner div element with position: fixed only visible within the outer div element, like a background image with background-attachment: fixed, you will think adding the property overflow: hidden. But the inner div element is still visible outside the outer div element.
Now, how to solve this problem? Here is the resolution: using the property clip-path instead the overflow property.
Here is a code example:
<style>
body {
padding: 50vh 0; /* for scrolling, so you can see this demonstration works */
}
#outer {
position: relative;
height: 75vh;
width: 50%;
border: 4px solid;
overflow: hidden;
clip-path: inset(0);
}
#inner {
position: fixed;
width: 100%;
top: 20px;
left: 0;
background-color: yellow;
}
</style>
<body>
<div id="outer">
<div id="inner">
Content goes here, and it's fixed AND only visible within #outer element
</div>
</div>
</body>
Of course, you can change the value of the clip-path property as you want. Take a look at this documentation: developer.mozilla.org/en-US/docs/Web/CSS/clip-path