-1

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.

sticky

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>
coder
  • 129
  • 7
  • 1
    You have `.sticky` and `
    ` - start with fixing that
     – NoOorZ24 Aug 26 '22 at 11:06
  • The form should be fixed in relation to what? And how are you sensing ‘after scrolling’? – A Haworth Aug 26 '22 at 11:26
  • 1
    `position: fixed` will move an element completely out of flow and position it fixed to the viewport. As it is out of flow it will no longer be affected by the parent `size`-wise. So you either need to define fixed width for both elements or use a script to get the width of an element and apply it to the other. – tacoshy Aug 26 '22 at 11:35
  • Did you consider `position:sticky`? – Paulie_D Aug 26 '22 at 12:02

2 Answers2

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>
Emílio Gularte Kipper
  • 58
  • 7
0

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>
Satyam Nagar
  • 58
  • 6