希望有人能看到我在这里遗漏了什么,我有两个相对定位的 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 如果它在相对容器内,它会遵守宽度、高度等。但固定的情况似乎并非如此。我能做些什么来使固定定位的 div 尊重容器吗?我正在使用 Bootstrap 4,我无法设置宽度,因为它是响应式的。
最佳答案
任何具有 position: fixed;
的元素都是相对于 viewport 定位的,而不是相对于具有 position: relative
或 的最近祖先>position:absolute
。
对子元素使用position: absolute
,对父元素使用position: relative
relative 放置子元素-元素。
查看更多关于 CSS 定位的信息 HERE .
关于jquery - 固定定位的 div 不尊重相对定位的父级?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52538010/