布局中的绝对定位与相对定位

原创于 2019-11-11 22:32:01 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析了绝对定位和相对定位的概念，解释了它们如何影响元素的位置，并详细阐述了top、left、right和bottom属性在两种定位方式下的具体作用。此外，还探讨了这两种定位方式对文档流的影响及实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绝对定位
相对祖籍元素中具有position,且值不为static的元素进行绝对定位
如果所有祖籍元素都没有position元素，就相对body进行定位
定位后，块元素变成行内块，脱离文档流，原来的位置被其他元素所占据

        如何定位呢？
        top：[定位元素]距离[相对元素]上面多远
        left：[定位元素]距离[相对元素]左面多远
        right：[定位元素]距离[相对元素]右面多远
        bottom：[定位元素]距离[相对元素]下面多远

相对定位
1.相对自身初始位置进行定位
2.不脱离文档流，元素特点没有发生变化
top：移动后的位子距离初始位置上边有多少距离 (正下负上)
left：移动后的位子距离初始位置左边有多少距离 (正右负左)
right：移动后的位子距离初始位置右边有多少距离 (正左负右)
bottom：移动后的位子距离初始位置下边有多少距离 (正上负下)
用途：用于微调