Question

我有很多div，位于position:absolute。我试图避免仅使用CSS规则叠加它们。我不想改变最高价值。

.try {
  /*some magic?*/
}
#pos1 {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 30px;
}
#pos2 {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 90px;
  left: 30px;
}
#pos3 {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
  top: 300px;
  left: 30px;
}
#pos4 {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  top: 400px;
  left: 30px;
}
#current {
  position: absolute;
  top: 5px;
  left: 50px;
}
#expected {
  position: absolute;
  top: 200px;
  left: 50px;
}

<h1 id="current">Current</h1>

<div id="pos1" class="try"></div>
<div id="pos2" class="try"></div>

<h1 id="expected">Expected</h1>

<div id="pos3"></div>
<div id="pos4"></div>

这也是jsfiddle：

ps：我认为这种行为是愚蠢的，因为我要求绝对的位置。

Answer 1

从文档的正常流程中删除绝对定位的元素。这意味着周围的内容会忽略它们并占据它们的位置：

9.6 Absolute positioning

在绝对定位模型中，从[...]中删除了一个框[...]   完全正常流动（它对后来的兄弟姐妹没有影响）。 [...]   绝对定位元素的内容可能会掩盖   另一个盒子的内容（或自己被遮盖），取决于   堆叠重叠框的水平。

因此要么不使用绝对定位，要么移动元素（例如带边距）。

避免div在位置叠加：asbolute

1 个答案: