child div with position fixed should have same width as parent div with position relative-CodePudding

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 >
  <div >
    <form ></form>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <form ></form>
  </div>
</div>

CodePudding user response：

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 >
   <div >
      <form ></form>
   </div>
</div>