固定定位 div 不尊重相对定位的父级？

Question

希望有人能看到我在这里遗漏了什么，我有两个 div 相对定位，其中是固定定位的子元素。我已经设置好了，这样当我滚动页面时，两个 divs 就会固定在浏览器的顶部，这里的代码是：

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

在固定之前它占用包含 div 的宽度，但之后它变小了，所以我试图让它保持固定的宽度，但是如果我把 width: 100% 在固定的 div 上它占据了页面的整个宽度，完全忽略了容器。我知道绝对定位 divs 如果它在相对容器内，它将尊重宽度、高度等。但固定的情况似乎并非如此。我能做些什么来使固定定位的 divs 尊重容器吗？我正在使用 Bootstrap 4，我无法设置宽度，因为它是响应式的。

Answer 1

具有 position: fixed; 的任何元素都相对于视口定位，而不是相对于具有 position: relative 或 position: absolute 的最近祖先。

对子元素使用position: absolute，对父元素position: relative使用相对于放置子元素。

详细了解 CSS 定位 HERE。

固定定位 div 不尊重相对定位的父级？

Fixed positioned div not respecting relative positioned parent?

html

css

jquery

css-position

bootstrap-4