Question

也许是到了一天的傍晚，但即使出现相对简单的问题，我也无法弄清楚。

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

$("#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之类的伪选择器来做到这一点，但实际上我还无法弄清楚。如果使用adjacent sibling combinator仅有两个.block元素，我可以实现我想要的：

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

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

是否有一种方法可以单独使用CSS实现此功能，还是需要修改jQuery才能实现？

示例here有点麻烦。

Answer 1

不要这样做，而是尝试将块元素添加到具有绝对位置的父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>

Answer 2

您可以在jQuery中处理一些CSS逻辑

let numberOfBlocks = 0;

$("#addBlock").click(function(){
  var $block = $("<div class='block'>I'm a block</div>");
  $block.css('top', numberOfBlocks * 60)
  $("body").append($block);
  numberOfBlocks++;
});

body {
  padding: 20px;
}

.block {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  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>

或创建一个绝对定位的容器：

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

body {
  padding: 20px;
}

#blockContainer {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
}

.block {
  height: 50px;
  background-color: #A6201C;
  color: #fff;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blockContainer"></div>
<button id="addBlock">Add Block</button>

Answer 3

这是现有答案和评论的变体。

下面，我说明如何创建和添加将绝对放置而不是单个项目放置的容器元素。尽管您可以快速计算没有容器添加到页面的项目数，并为每个项目添加唯一的top值。如果列表的样式或位置发生变化，则拥有一个容器会更加整洁，模块化且易于维护。

下面的示例还使用普通JS，ES6语法和少许BEM。

( () => {

  function createBlockListItem( content ) {
   
    const block = document.createElement( 'div' );
   
    block.classList.add( 'block-list__item' );
    block.textContent = content;
   
    return block;
   
  }

  const addBlockBtn       = document.querySelector( '#add-block' );
  const blockList         = document.createElement( 'div' ); // Container element.  
  let   blockListAppended = false;
  
  blockList.classList.add( 'block-list' );  
  
  addBlockBtn.addEventListener( 'click', function ( e ) {
  
    if ( !blockListAppended ) {
      document.body.appendChild( blockList );
      blockListAppended = true;
    }
    
    blockList.appendChild( createBlockListItem( 'I am a block!' ) );
    
  } );

} )();

body {
  margin: 0;
}

.block-list {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
}

.block-list__item {
  height: 50px;
  color: #fff;
  background-color: #A6201C;
}

.block-list__item + .block-list__item {
  margin-top: 10px;
}

<button id="add-block">Add Block</button>

仅使用CSS进行具有绝对定位的垂直堆栈元素

3 个答案: