css中的top和bottom

CSS中的top和bottom是两个常用的属性，它们可以用来控制元素在垂直方向上的位置。

 .box {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  } 

在上述代码中，我们使用了position属性将元素定位为绝对定位，并使用了top属性将元素相对于父元素的顶部偏移了20px。

 .box {
    position: relative;
    bottom: 10%;
  } 

而在这个例子中，我们使用position属性将元素定位为相对定位，并使用了bottom属性将元素相对于父元素的底部偏移10%。

需要注意的是，如果同时设置了top和bottom属性，那么bottom属性会覆盖top属性。

 .box {
    position: absolute;
    top: 20px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  } 

在这个例子中，因为设置了top和bottom属性，所以元素会相对于父元素的顶部偏移20px，同时相对于父元素的底部偏移10px。但实际上，底部偏移会覆盖顶部偏移，所以最终元素会相对于父元素的底部偏移10px。

总的来说，top和bottom属性可以让我们轻松地控制元素的垂直位置，但要注意它们的使用顺序以及它们之间的覆盖关系。