html 图片元素的坐标定位,CSS的定位

CSS的定位

1. 定位的必要性

浮动可以让多个块级盒子一行没有缝隙地排列显示，经常用于横向排列盒子

定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子

2. 定位的组成

定位=定位模式+边偏移

定位模式：用于指定一个元素在文档中的定位方式，通过position属性设置。

属性值

说明static

静态定位

relative

相对定位

absolute

绝对定位

fixed

固定定位

边偏移：决定了该元素的最终位置。

边偏移属性

示例

描述top

top: 10px

顶端偏移量，定义元素相对于其父元素上边线的距离

bottom

bottom: 10px

底部偏移量，定义元素相对于其父元素下边线的距离

left

left: 10px

左侧偏移量，定义元素相对于其父元素左边线的距离

right

right: 10px

右侧偏移量，定义元素相对于其父元素右边线的距离

3. 定位模式

3.1 静态定位static

元素的默认定位方式，无定位的意思。

选择器 {

position: static;

}

按照标准流特性摆放位置，没有边偏移

在布局时很少用到

3.2 相对定位relative