CSS定位布局

CSS 定位布局

1、定位的作用

普通文档流中块元素垂直排列，行内元素水平排列。 浮动可以实现多个块级盒子在一行无缝排列显示。 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置（自由的在某个盒子内移动位置或者固定在屏幕中的某个位置）。

2、定位的实现

使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。

定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。

边偏移定位元素的位置，使用top、right、bottom和left来描述。

通常水平位置通过left或right控制，垂直位置通过top或bottom控制。

• 位置属性

  • left：设置距离包含块左侧的距离

  • right：设置距离包含块右侧的距离

  • top：设置距离包含块顶部的距离

  • bottom：设置距离包含块底部的距离

• 取值

  • 长度值：px/em等

  • 百分比：相对于包含块计算

  • auto 默认值

  • 允许使用负值

3、定位模式详解

3.1 相对定位

postion:relative;

相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相