DEVHIDE
Login Or Sign up

Can you mix fixed/relative positioning?

104 Views Asked by At

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>

css css-position fixed
Original Q&A
2

There are 2 best solutions below

5
jessman5 On BEST ANSWER

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>

8
Johannes On

Follow-up to the previous answer plus OP's comment to it:

You can use position: absolute and add left: calc(95vw - 100px); instead of the right setting, 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)

Added note after comments: This CSS-only solution is intended for the situation when the existing HTML structure cannot be changed (the OP didn't go into detail about this, so I wouldn't know if that's the case). If the HTML can be edited, it would be better to change the HTML structure and apply according css settings to those elements.

<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: hidden; padding: 10px; position: relative; box-sizing: border-box;">
    <div style="position: absolute; top: 20px; left: calc(95vw - 100px); background-color: pink; padding: 3px; border: 1px solid gray; width: 100px; box-sizing: border-box;">Blah!</div>

    <div style="overflow: auto; width: 100%; height: 100%;">
gygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghjgygygffgvfvghj
    </div>
</div>
</body>
</html>

Additional remark, moved from comment to answer: If you don't want a "relative" (5%/vw) distance from the right edge of the window, but a fixed pixel distance, you can also use left: calc(100vw - 150px);in the above example, where the px value is the sum of the element's width and the desired fixed distance from the right (to be adjusted as needed)

Please also 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.

Related Questions in CSS

Related Questions in CSS-POSITION

Related Questions in FIXED

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.