css上下两个盒子

在 CSS 中，可以通过 position 属性来让盒子相对于其父元素进行定位。为了让上下两个盒子实现排列，可以通过设置它们的 position 为 absolute，并且给它们一个相对的位置，比如使用 top 和 bottom 属性来实现。

.top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50%;
  background-color: red;
}

.bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: blue;
} 

上面的代码中，上下两个盒子都具有绝对位置，并且分别设置了 top 和 bottom 属性以达到上下排列的效果。由于父元素的高度为 100%，所以上下两个盒子的高度分别为父元素的一半，从而占据了整个父元素。

除了使用 absolute 定位，还可以使用 flexbox 或 grid 布局来实现上下两个盒子的排列。这两种方法都需要设置父元素的布局方式，灵活性更大、更易维护，适用于更复杂的布局需求。