CSS属性，如果重叠，则将元素向下推，如果不重叠，则保持顶部？

ep6jt1vc 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(112)

我有一些动态生成的项目与给定的top属性。我想：
1.如果项目上方没有元素或没有重叠，则它仍保留其top属性。
1.如果上面有一些重叠的项目，将它们向下推，直到没有重叠。
如何实现类似min-top或max-margin的属性？

const button = document.querySelector("input");
button.addEventListener("click", addItem);

function addItem() {
  const container = document.getElementById('container');
  const item = document.createElement('div');
  item.classList = 'item';
  const height = Math.floor(Math.random() * 500);
  item.style.top = height + 'px';
  item.innerText = 'Top ' + height
  container.appendChild(item);
}

.container {
  position: relative;
  overflow: visible;
  width: 200px;
  height: 600px;
  border: 1px solid blue;
}

.item {
  width: 100px;
  height: 80px;
  position: absolute;
  left: 80px;
  top: 0px;
  border: 1px solid red;
}

<input type="button" value="Add random item">
<div id="container" class="container">
  Container
</div>

css

来源：https://stackoverflow.com/questions/77313503/css-property-to-push-element-down-if-overlapped-remain-top-if-not-overlapped

1条答案

按热度按时间

prdp8dxp1#

为什么不使用 Package 容器的项目和追加新的项目内。您可以将这个新容器定位为绝对值，并给予属性display: flex;flex-direction: column;这样的事情

const button = document.querySelector("input");
button.addEventListener("click", addItem);

function addItem() {
  const container = document.getElementById('container-new');
  const item = document.createElement('div');
  item.classList = 'item';
  const height = Math.floor(Math.random() * 500);
  item.style.top = height + 'px';
  item.innerText = 'Top ' + height
  container.appendChild(item);
}

.container {
  position: relative;
  overflow: visible;
  width: 200px;
  height: 600px;
  border: 1px solid blue;
}

.containew-new {
position: absolute;
  left: 80px;
  top: 0px;
display:flex;
flex-direction: column;
}

.item {
  width: 100px;
  height: 80px;  
  border: 1px solid red;
}

<input type="button" value="Add random item">
<div id="container" class="container">
  <div id="container-new" class="container-new">
  Container
  </div>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

CSS属性，如果重叠，则将元素向下推，如果不重叠，则保持顶部？

1条答案

相关问题

热门标签

最新问答