定位组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

边偏移

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移属性 示例 描述
top top: 80px 顶端偏移量,定义元素相对于其父元素上边线的距离
bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量,定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量,定义元素相对于其父元素右边线的距离

静态定位 static

静态定位是元素的默认定位方式,无定位的意思。

语法:

1
选择器 { position: static; }
  • 静态定位按照标准流特性摆放位置,它没有边偏移
  • 静态定位在布局时很少用到

相对定位 relative

相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋型)。