CSS中是否有TOP值可根据前一元素高度动态定位div？

嘿，作为CSS新手，你的这个需求其实非常基础也很容易实现——完全不需要手动设置top属性，CSS本身的默认布局规则就能帮你搞定。

一、默认文档流：自动垂直排列 #

div是块级元素（block-level element），在默认的文档流中，块级元素会自动垂直堆叠排列，每个元素都会紧跟在前一个元素的下方，位置完全由前一个元素的实际高度决定，而且默认会占满父容器的全屏宽度（只要你没给它设置固定宽度或者浮动、定位等脱离文档流的属性）。

举个简单的例子，你的代码不用做任何修改就能实现效果：

<div id="A">我是A，高度由我的内容撑开</div>
<div id="B">我是B，会自动排在A的下方</div>
<div id="C">我是C，会自动排在B的下方</div>

哪怕A的高度因为内容变化而改变，B和C也会自动跟着调整位置，完全不需要你手动计算或设置top值。

二、如果非要用定位的情况（特殊场景） #

如果你因为某些设计需求，必须给这些div设置position: absolute或position: relative（这时候元素可能会脱离文档流），那也有办法动态定位：

• 使用top: auto：这是top属性的默认值，在相对定位（position: relative）下，元素会保持它在文档流中的原始位置，相当于没有设置top；
• 结合CSS变量与JavaScript：如果是绝对定位，你可以用JS获取前一个元素的高度，把值赋给CSS变量，然后用top属性引用这个变量：

  :root {
    --a-height: 0px;
  }
  #B {
    position: absolute;
    top: var(--a-height);
    width: 100%;
  }
  

  然后用JS获取A的高度并赋值：

  document.documentElement.style.setProperty('--a-height', document.getElementById('A').offsetHeight + 'px');
  

• 使用calc()计算：如果前一个元素的高度可以通过其他CSS值推导，也可以用calc()来动态计算top值，比如top: calc(var(--a-height) + 20px)（这里的20px可以用来设置元素间的间距）。

总结 #

你的核心需求（按前一个元素高度依次排列、全屏宽度），用CSS默认的块级元素布局就能完美实现，根本不需要折腾top属性。只有在特殊的定位场景下，才需要考虑用top的相关值来调整位置。

内容的提问来源于stack exchange，提问作者Zac Brown