CSS Div 位置行为

Question

我对 div 位置(相对、绝对、固定)属性的理解有问题。我基本上有一个绝对的 div 居中。在 div 内部，应该可以垂直和水平滚动。在这个 div 中应该有一个宽度大于屏幕(溢出)的固定标题和一个垂直和水平溢出的内容 div。

html,
body {
    height: 100%;
    width: 100%;
    background: #fff;
    margin: 0px auto;
    padding: 0px auto;
    position: fixed;
}

.container {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    background: #2924aa;
    overflow: scroll;
    display: flex;
    position: absolute;
    z-index: 20;
}

.container-header {
    width: calc(100%);
    height: calc(10%);
    background: #2924aa;
    overflow: visible;
    z-index: 10;
    position: fixed;
    background: red;
}

.container-body {
    width: calc(110%);
    height: calc(110%);
    background: #2924aa;
    overflow: auto;
    position: absolute;
    background: green;
}

  <div class="container">
      
    <div class="container-header"></div>
      
    <div class="container-body"></div>
      
  </div>

这是我的笨蛋: https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy

Answer 1

所以我认为您的主要问题是关于 CSS3 中的位置属性。以下是每个可能值的简要总结。

CSS 定位
position的CSS定位属性有四个不同的值。
静态 - 静态是位置的默认值。它使页面上的元素保持在原位，并在您滚动时向上滚动页面。
Relative - 相对定位与静态定位几乎相同；但是，您可以使用 left、right、top 和 bottom 属性来更改元素的位置相对于其原始位置。
固定 - 固定元素的位置与视口(viewport)(即浏览器)相关，因此具有固定位置的元素不会随页面滚动，因为当您滚动时视口(viewport)不会改变。但是，如果您调整浏览器的大小，元素将改变位置。
绝对 - 具有绝对位置的元素相对于其父元素(即包含它的元素)定位。

一个很好的资源，可以找到更多信息，包括一些图表 here .