top、bottom怎么用

`top` 和 `bottom` 属性在CSS中用于定位元素的边缘，尤其当使用绝对定位 (`position: absolute`) 或者相对定位 (`position: relative`) 时，这两个属性可以帮助你精确控制元素在容器内部的垂直位置。

1. **绝对定位 (`position: absolute`)**:
- `top`：设置元素距离其最近的非static定位祖先元素顶部的距离。如果找不到这样的祖先，则相对于视口顶部定位。
- `bottom`：设置元素距离其最近的非static定位祖先元素底部的距离。同样，如果没有找到，它将相对于视口底部定位。

示例：

   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50px;  // 元素离父元素顶部50像素
     bottom: 0;   // 自然贴靠到父元素底部
   }

2. **相对定位 (`position: relative`)**:
当一个元素具有相对定位，它的`top`和`bottom`值会被应用于自身在正常文档流中的位置。

   .parent {
     position: relative;
   }
   .child {
     position: relative;
     top: 20px;  // 将元素向上偏移20像素
     bottom: 30px; // 向下偏移30像素
   }

这两个属性常用于实现像导航栏固定、图片轮播、弹出层等动态布局效果。需要注意的是，当结合z-index一起使用时，`top`和`bottom`会帮助确定元素在堆叠顺序中的位置。