CSS定位允许你对元素进行精确的控制，使其出现在页面上的特定位置。这主要通过position属性来实现，该属性有多个值可以选择。
- Static（静态）：这是元素的默认值。如果没有为元素指定定位属性，那么它就会根据正常的文档流进行定位（即按照HTML源码的顺序排列）。静态定位的元素不会受到top, bottom, left, right这些属性的影响。
- Relative（相对定位）：相对定位元素的定位是相对于其正常位置。因此，”left:20px”会向元素的左侧添加20像素。其他属性top, right和bottom也类似。即使元素移动了，它仍然会保留在文档流中的空间，这可能会导致重叠。
- Absolute（绝对定位）：绝对定位的元素会相对于最近的已定位父元素（即设置了position属性的元素）进行定位。如果元素没有已定位的父元素，那么它会相对于最初的包含块（通常是body元素）进行定位。绝对定位的元素的位置通过left, right, top, bottom属性进行规定。绝对定位会使元素从文档流中完全删除，不占用空间。
- Fixed（固定定位）：固定定位的元素会相对于浏览器窗口进行定位，即使页面被滚动，它仍然会停留在相同的位置。其位置也是通过left, right, top, bottom属性进行规定。固定定位的元素也会从文档流中删除，不占用空间。
- Sticky（粘性定位）：粘性定位可以被看作是相对定位和固定定位的混合。元素在跨越特定滚动阈值之前为相对定位，之后为固定定位。例如，如果设置了
position: sticky; top: 0;，那么当元素在页面上向上滚动并超过其正常位置时，它将“粘”在其容器的顶部，直到页面向下滚动回到其正常位置为止。
注意：在使用定位时，z-index属性也很重要，它决定了当元素重叠时哪个元素应该在前。z-index值较大的元素会覆盖值较小的元素。
教程购买指南：本站支持免登录购买教程，比例为：1元=10积分。支付成功后返回到资源列表刷新即可看到购买的教程已经可以播放了。建议大家注册充值购买，这样会在用户中心找到自己购买过的教程，随时重新观看。
如遇到教程不能播放请及时联系站长：QQ 736670968，邮箱：csbn211@163.com
转载请注明：破帽子教程 » 前端开发基础：CSS四种定位
