HTML中的三种布局方式

浮动 标准流 定位

position属性的意义

position属性决定了元素将如何定位
通过top、right、bottom、left实现位置的改变

position中的可选参数 relative static absolute fixed inherit

relative 参数特性

不脱离文档流
可以利用top right bottom left 进行定位
为子定位划分作用域
移动区域为整个网页

absolute 参数特性

可以利用top right bottom left 进行定位
脱离文档流
为子定位划分作用域
移动区域为整个网页

fixed 参数特性

可以利用top right bottom left 进行定位
脱离文档流
为子定位划分作用域
移动区域为整个窗口区

定位中的层级

通过顺序插入，越后添加的定位元素层级越大
z-index改变层级
不同父元素中的子元素的层级各不相干

z-index属性值

z-index：auto(默认值)
z-index：inherit（继承）
z-index：number（number指具体数值）

z-index特性

可以设置元素的叠加顺序，但依赖定位属性
z-index大的元素会覆盖z-index小的元素
z-index为auto的元素不参与层级比较
z-index 为负值，元素被普通流中的元素覆盖

定位与边距的异同

margin、padding通过控制边距改变距离
position通过定位改变距离