Fixed position relative to parent not browser

Question

I want right and left side divs to be fixed in position with class main-wrapper in line with blue color box...Right now its taking top position with the header.Want it to be floating fixed not absolute.it shoulds tick to the main-wrapper.position top:0 to main-wrapper.Tried almost everything not working.

below is the code:

.header{
     width:500px;
     margin:0 auto;
     background:red;
     height:300px;
}
 .container{
     margin:20px auto;
     background:blue;
     height:1000px;
    width:500px;
}
 .header-wrapper,.main-wrapper{
     width:100%;
}
 .main-wrapper{
     position:relative;
}
 .left-ad,.right-ad{
     width:100px;
     height:250px;
     background:pink;
     position:fixed;
}
 .left-ad{
    left:0;
     top:0;
}
 .right-ad{
    right:0;
     top:0;
}

<div class="header-wrapper">
    <div class="header">
    </div>
</div>
<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

Possible duplicate of [Fixed position but relative to container](https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) FYI, typing “position fixed relative to parent” into Google would have easily gotten you there. Please make an actual effort. — CBroe, Mar 14 '18 at 08:13
Then you should at least mention that upfront in your question, and describe what you have tried and with what results. — CBroe, Mar 14 '18 at 08:23
i dont need a suggesstion ..need a solution.....and i think no one mentions the story of how they tried...its only query to be mentioned. — Bini Mehta, Mar 14 '18 at 08:44
Please go read [ask]! It very explicitly tells you that we expect you to show us what you tried. The purpose of this site is not to provide you with copy&paste-ready “solutions” all the time, without you making any reasonable effort in the first place. — CBroe, Mar 14 '18 at 09:11

score 1 · Accepted Answer · answered Mar 14 '18 at 09:15

Applied position:sticky property to make left and right div to be position fixed absolute.Position Property

<div class="header-wrapper">
  <div class="header">
  </div>
</div>

<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

`.header { 
      width:500px;
      margin:0 auto;
      background:red;
      height:500px;
 }
.container { 
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
.header-wrapper, .main-wrapper { 
    width:100%;
}
.main-wrapper { 
    position:relative;
}
.left-ad, .right-ad {     
     position: sticky; 
     width:100px;
     height:250px;
     background:pink;
 }
.left-ad {float:left; left:0; top:0; }
.right-ad {float:right; right:0; top:0; }`

oh it worked......thanks a lot.ill soon apply to the website n check.... — Bini Mehta, Mar 14 '18 at 09:28
it doesnt support ie 11.so we need a hack or put something manually? — Bini Mehta, Mar 14 '18 at 09:31

Anzil khaN · Answer 2 · 2018-03-14T09:05:27.570

Is this you want ??

Add top value to the .left-ad,.right-ad selector.

.header{
     width:500px;
     margin:0 auto;
     background:red;
     height:300px;
}
 .container{
     margin:20px auto;
     background:blue;
     height:1000px;
     width:500px;
}
 .header-wrapper,.main-wrapper{
     width:100%;
}
 .main-wrapper{
     position:relative;
}
 .left-ad,.right-ad{
     width:100px;
     height:250px;
     background:pink;
     position:fixed;
}
 .left-ad{
     left:0;
     top:328px;
}
 .right-ad{
     right:0;
     top:328px;
}

<div class="header-wrapper">
    <div class="header">
    </div>
</div>
<div class="main-wrapper">
    <div class="left-ad">
    </div>
    <div class="right-ad">
    </div>
    <div class="container">
    </div>
</div>

Fixed position relative to parent not browser

2 Answers2