一、前言
1.HTML中的三种布局方式:
- 标准流(普通流):网页中默认的布局方式,即顺序布局
- 浮动:float
- 定位:position
2.position属性的作用方式:
- 给position属性设置相应的值,可使元素脱离正常的标准流,并且可以使用top、right、left、bottom属性对元素进行定位,还可以使用z-index属性对元素的层叠顺序进行更改
- position的五个属性值:static、relative、absolute、fixed、inherit
为方便,top、right、left、bottom属性简写为TRLB
二、介绍position的五个属性值
1.static:默认值,无定位
- 元素显示在正常的标准流中,并且忽略TRLB以及z-index属性的设置
- 相当于没有设置position属性
2.absolute:生成绝对定位元素
- 可以使用TRLB对元素进行定位,也可使用z-index更改元素的层叠顺序
- 相对于 static 定位以外的第一个父元素进行定位,脱离了正常的标准流,并且不占用标准流空间
举个栗子:
将div标签的position设置为absolute absolute /*{margin:0px;padding:0px; }.absolute{width:100px;height:100px;border:1px solid red;position:absolute;top:0px;left:0px; } 你好