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

我不是百分之百确定如果我得到你想要达到的目标，可能会对预期结果做一点描述。

如果你想将你的绝对元素9px转移到带有“边距”的红色框中，那么我的回答是：

实际上，保证金也适用于你的绝对元素，而不是你想要的地方。

Boxmodel有保证金 - ＆gt;边界 - ＆gt;从外到内填充，定位在边界开始处完成。

要做到这一点，请添加

 border: 9px solid red;

到小提琴中的容器，然后你的红盒内有9px偏移。

Answer 2

因为容器是120％而且显示：阻止。只需显示内联块，您就可以在右侧获得边距。请参阅以下示例。

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>

以绝对位置管理保证金

2 个答案: