1

My English is not good. If I made a typo, please edit it. And i am very beginner

I want to have something like this

Click for what I want to have

I want to have a fixed-div whose width and height are controlled, but responsive and not manually, inside a responsive parent.

I want the child inside the .parent to be reactively fixed, and that's what I tried

#parent {
    position: relative;
    width: 50%;
    margin: 2rem auto;
    background-color: orange;
    padding: 1rem;
}

#middle {
  position: absolute;
  width: 100%;
  height: 200px;
  background: blue;
}

#child {
    position: fixed;
    width: 100%;
    height: 100px;
    background: red;
}
<html>
<body>

    <div id="parent">
        <div id="middle">
            <div id="child"></div>
        </div>
    </div>
    
</body>
</html>
mordad
  • 129
  • 9
  • 4
    For me is not clear what do you want, but take a look to [position:sticky;](https://developer.mozilla.org/en-US/docs/Web/CSS/position) – Sfili_81 Aug 02 '21 at 07:18
  • 1
    Ye position sticky might help you. Can you upload a video/photo of the result that you wish to become? – Amini Aug 02 '21 at 07:21
  • 1
    you can't have `position: fixed` relative to parent, use `position: absolute` instead. Please refer to this https://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent/7823145 – Md Junaid Alam Aug 02 '21 at 07:21

0 Answers0