Is it possible to have a relative DIV with a fixed position DIV inside that which is fixed relative to the container instead of being fixed to the window?
I tried the solutions shown in this answer:
Fixed position but relative to container
But none seem to work. Here's the HTML/CSS that I'm using (it's the pink DIV in the corner that I want to be fixed relative to its container):
<html>
<body>
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu
hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
<div style="transform: translateZ(0); width: 100%; height: 200px; background-color: #ddd; overflow: auto; padding: 10px; position: relative">
<div style="position: fixed; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray">Blah!</div>
gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
</div>
</body>
</html>position: fixed will always relate to the browser window, regardless where it's located in the code and regardless if it has a positioned element as parent.
What you want to use here is position: absolute. This will relate to the first parent that is positioned (relative, absolute, fixed, sticky).
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
hu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo hohu hu ohjo ho
<div style="transform: translateZ(0); width: 100%; height: 200px; background-color: #ddd; overflow: hidden; padding: 10px; position: relative">
<div style="position: absolute; top: 20px; right: 20px; background-color: pink; padding: 3px; border: 1px solid gray; width: 100px;">Blah!</div>
<div style="overflow: auto; width: 100%; height: 100%;">
gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
</div>
</div>