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>
2
Answers
position: fixedwill 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).Follow-up to the previous answer plus OP’s comment to it:
You can use
position: absoluteand addleft: calc(95vw - 100px);instead of therightsetting, which positions it at 5% distance from the right side of the window – 95% of the window width minus the defined width of the element itself. (Adjust values as needed)Please note that I also added
box-sizing: border-box;to your divs to include (instead of the default adding) the padding in their defined widths.