css 绝对定位与相对定位

在CSS布局中，位置定位是非常关键的，定位方式有绝对定位与相对定位两种方式。

绝对定位：元素通过设置位置属性 top, bottom, left, right 的值来相对于最近的非 static 定位元素进行定位。如果没有非 static 定位元素，那么元素将相对于页面的 body 元素进行定位。

    position: absolute;
        top: 0;
        left: 0;
    

相对定位：元素通过设置位置属性 top, bottom, left, right 的值来相对于元素本身默认位置进行定位，并不会影响其他元素的位置。

    position: relative;
        top: 10px;
        left: 10px;
    

区别：

• 绝对定位是相对于最近的非 static 定位元素进行定位，而相对定位是相对于元素本身定位。
• 绝对定位会脱离文档流，相对定位不会。
• 绝对定位元素定位时，不会影响其他元素的位置，而相对定位元素会影响其他元素的位置。

在实际开发中，应该灵活使用这两种定位方式，根据具体情况选择使用哪种方式来布局。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！