Question

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这是我的傻瓜： https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy

Answer 1

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

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

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

CSS Div Position Behavior

1 个答案: