Question

希望有人能看到我在这里所缺少的东西，我有两个div相对放置，其中有固定定位的子元素。我进行了设置，以便在滚动页面时，两个div固定在浏览器顶部，并在此代码如下：

//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占用页面的整个宽度，完全忽略了容器。我知道绝对定位的div是否在相对容器中，它将尊重宽度，高度等。但是固定情况似乎并非如此。我可以做些什么使固定位置的divs尊重容器？我正在使用Bootstrap 4，但无法设置宽度，因为它具有响应能力。

Answer 1

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

将position: absolute用于子元素，将position: relative用于相对于您要放置子元素的父。

有关CSS定位的更多信息 HERE 。

固定排名的div不尊重相对排名的父项？

1 个答案: