固定 VS 绝对定位以进行滚动答案

【问题标题】：fixed VS absolute positioning for scrolling固定 VS 绝对定位以进行滚动
【发布时间】：2015-05-09 01:47:34
【问题描述】：

我只是在玩一些 CSS 的绝对和固定属性，发现 CSS 中的绝对定位和相对定位之间存在不寻常的差异。

基本上，当我绝对定位某些内容并且内容超过窗口或包含元素的高度时，会出现滚动条，但是当我将位置更改为固定时，即使内容的高度与窗口，不出现滚动条。

我为此创建了一个测试用例：

HTML：

<div class="page-container">
    <div class="helper">
        <div class="marker red"></div>
        <div class="marker green"></div>
        <div class="marker yellow"></div>
        <div class="marker blue"></div>
    </div>
</div>

CSS：

#slides-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.helper {
    height: 400%;
    width: 20px;
    position: fixed;   /* change this to absolute and the scrollbars appear*/
    top: 0;
    left: 0;
}
.helper .marker {
    height: 25%;
    width: 100%;
}
.marker.red {
    background: red;
}
.marker.green {
    background: green;
}
.marker.yellow {
    background: yellow;
}
.marker.blue {
    background: blue;
}

这是小提琴：fiddle。（检查 CSS 中的注释）

希望能对此问题作出解释。

【问题讨论】：

您的 CSS 包含对 #slides-container 的引用，该引用在您的标记中不存在。这是疏忽还是应该忽略？
@BoltClock 允许我更正您的殿下；）：D

标签： html css css-position

【解决方案1】：

固定定位意味着元素在视口中是固定的——它不受滚动的影响。你可以在这里阅读更多：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

由于没有其他方法可以为您的页面提供高度，因此在这种情况下您所看到的只是固定元素的任何部分适合您的视口。

查看在此版本中为容器设置高度时会发生什么： http://jsfiddle.net/93ubza81/3/

.page-content{
height: 3000px;
}

您可以滚动，但固定元素不受影响。

【讨论】：