时间戳

首页 > 解决方案 > 仅使用 CSS 以绝对定位垂直堆叠元素

css - 仅使用 CSS 以绝对定位垂直堆叠元素

问题描述

也许这只是一天的晚些时候，但即使它看起来是一个相对简单的问题，我也无法弄清楚。

我有一个简单的 jQuery 函数，当单击按钮时会触发该函数。它创建元素并将它们附加到body我的 DOM 中：

$("#addBlock").click(function(){
    var $block = $("<div class='block'>I'm a block</div>");
    $("body").append($block);
});

该类.block包括绝对定位，如下所示：

.block {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
    height: 50px;
    background-color: #A6201C;
    color: #fff;
}

每次单击按钮时，.block都会成功添加一个新元素。然而，由于它们的绝对定位，它们彼此“在顶部”（在 z 轴上）。我想要的是让每个元素垂直（在 y 轴上）出现在其前一个兄弟元素的下方。

我以为我可以使用伪选择器来做到这一点，:nth-of-type但实际上我还没有弄清楚。如果只有两个.block元素使用相邻的兄弟组合器，我可以实现我想要的：

.block + .block {
    margin-top: 60px; /*The height of the previous block plus 10px for spacing*/
}

但这没有用，因为我不知道这个类会有多少元素——可能有几十个。

有没有办法我可以单独使用 CSS 来完成它，或者我需要修改我的 jQuery 来完成它？

这里有一个例子的小提琴。

标签： css

解决方案

而不是这样做，尝试将块元素添加到父 div，绝对定位：

$("#addBlock").click(function() {
  var $block = $("<div class='block'>I'm a block</div>");
  $("#blocks").append($block);
});
body {
  background: #fff;
  padding: 20px;
}

#blocks {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
}

.block {
  height: 50px;
  background-color: #A6201C;
  color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addBlock">Add Block</button>
<div id="blocks">

</div>

推荐阅读