Fixed positioned div not respecting relative positioned parent?

Question

Hoping someone can see what I'm missing here, I have two divs positioned relatively, within them are child elements positioned fixed. I have it set up so that when I scroll the page the two divs become fixed to the top of the browser with this code here:

//Code to make sub-nav and cart scroll with the page
$(document).ready(function() {
  var stickySidebar = $('.sideSubNav, .cartcontainer').offset().top;

  $(window).scroll(function() {
    if ($(window).scrollTop() > stickySidebar) {
      $('.sideSubNav, .cartcontainer').addClass('affix');
    } else {
      $('.sideSubNav, .cartcontainer').removeClass('affix');
    }
  });
});

.sideSubNav.affix,
.cartcontainer.affix {
  position: fixed;
  top: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-sm-9">
  <div class="sideSubNav">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</div>

<div class="col-sm-3">
  <div class="cartcontainer">
    <!--shopping cart-->
  </div>
</div>

Before it becomes fixed it takes the width of the containing div, but afterwards it becomes smaller, so I'm trying to make it stay the same width as it's fixed, but if I put width: 100% on the fixed div it takes the entire width of the page, completely ignoring the container. I know with absolutely positioned divs if it's within a relative container it will respect the width, height etc. But that doesn't seem to be the case with fixed. Is there anything I can do to make the fixed positioned divs respect the container? I'm using Bootstrap 4, and I can't set a width because its responsive.

Can you post the HTML too please? This appears to be a [duplicate question](https://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent) — Carol Skelly, Sep 27 '18 at 13:22
I have edited your snippet, to make your question more clear. — Razvan Zamfir, Sep 27 '18 at 14:20

score 2 · Accepted Answer · answered Sep 27 '18 at 13:28

Any element with position: fixed; is positioned relative to the viewport, not to the nearest ancestor with position: relative or position: absolute.

Use position: absolute for the child-elements and position: relative for the parent relative to which you want to position the child-elements.

See more on CSS positioning HERE.

Fixed positioned div not respecting relative positioned parent?

1 Answers1