固定 position 的子 div 应具有与 position 相对的父 div 相同的宽度

Question

I'd like to have a div's position fixed after scrolling. But when I change the position to fixed the div goes out of it's container. The div with the class fixed should be just as wide as the div with the class relative . The width of the parent div is dynamic. Only the max-width is known. No position sticky should be used.

I'm trying to achieve the following: When you click a button, a form opens. the form should be fixed.

There are already some threads on this topic. However, the solutions didn't work for me. It can also be solved with JS (but no JQuery).

Set width of a "Position: fixed" div relative to parent div

Set width of fixed positioned div relative to his parent having max-width

The following solutions didn't work for me:

• width: inherit
• max-width: inherit
• width: 100%

 .relative { position: relative; background-color: red; max-width: 1200px; height: 150vh; }.absolute { position: absolute; background-color: blue; top: 0; left: 0; right: 0; bottom: 0; width: inherit; }.fixed{ position: fixed; background-color: green; height: 50px; width: inherit; z-index: 5; }

 <div class="relative"> <div class="absolute"> <form class="fixed"></form> </div> </div>

Answer 1

You need to inherit your max-width on both child elements, and on the last one apply width: 100%. And also apply your sticky class to the fixed div.

 .relative { position: relative; background-color: red; max-width: 1200px; height: 150vh; }.absolute { position: absolute; background-color: blue; top: 0; left: 0; right: 0; bottom: 0; width: inherit; max-width: inherit; }.sticky { position: fixed; background-color: green; height: 50px; width: inherit; z-index: 5; max-width: inherit; width: 100%; }

 <div class="relative"> <div class="absolute"> <form class="sticky"></form> </div> </div>

Answer 2

Understand Fixed: ( Full Blog Here )
"Unlike absolute, fixed doesn't position itself from its closest relative parent. Instead, fixed positions itself relative to the viewport . The viewport will always stay fixed , which is why you get the effect that you do.

That being said, whenever you "inherit" any width it will be respective to the viewport . So it does us no good when we're trying set the width of our target element to the width of it's parent"

Css fixed position is a bit tricky to play with, maybe you should consider using position: sticky . It remains relative to its parent element.

Try this:

 * { margin: 0%; padding: 0%; box-sizing: border-box; }.relative { background-color: red; width: 50%; height: 350vh; }.absolute { background-color: blue; position: sticky; top: 50%; margin-left: 50%; transform: translate(-50%, -50%); width: 50%; height: 25vh; display: flex; justify-content: center; align-items: center; }.fixed { background-color: green; height: 50%; width: 80%; }

 <div class="relative"> <div class="absolute"> <form class="fixed"></form> </div> </div>