html - 用绝对头寸管理 margin

Question

当我尝试在具有绝对定位元素的容器上应用边距时遇到问题。这个边距似乎没有应用在右端。

我的模板是一个包含多个元素的简单容器:

<div class="app">
  <div class="container">
    <div class="element first">
      0
    </div>
    <div class="element second">
      1
    </div>
    <div class="element third">
      2
    </div>
  </div>
</div>

容器看起来像这样(高度和宽度为 120% 时会溢出):

.container {
  height: 120%;
  width: 120%;
  margin: 9px;
  background-color: red;
  position: relative;
}

元素是一些具有绝对位置的简单 div :

.element {
  position: absolute;
  background-color: blue;
  height: 30px;  
  width: 30px;
  color: white;
  text-align: center;
  line-height: 30px;
}

我希望在容器的每一端应用边距，即使此容器溢出 .app 元素也是如此。

这是 JsFiddle重现问题并注意其他地方的边距都很好。我错过了一点吗？

Answer 1

是因为容器120%显示:block。只需显示内联 block ，您就会在右侧获得边距。请参阅以下示例。

html, body, .app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.app {
  overflow: auto;
}

.container {
  height: 120%;
  width: 120%;
  margin: 9px;
  background-color: red;
  position: relative;
  display: inline-block;
}

.element {
  position: absolute;
  background-color: blue;
  height: 30px;  
  width: 30px;
  color: white;
  text-align: center;
  line-height: 30px;
}

.first {
  top: 0;
  left: 0;
}

.second {
  top: 0;
  right: 0;
}

.third {
  right: 0;
  bottom: 0;
}

<div class="app">
  <div class="container">
    <div class="element first">
      0
    </div>
    <div class="element second">
      1
    </div>
    <div class="element third">
      2
    </div>
  </div>
</div>