三种定位机制: 静态定位,相对定位,绝对定位
四中属性值:
- static
- relative
- absolute
- fixed
如果处于文档流中,则占用文档空间,对它的兄弟元素仍有影响
如果是脱离了文档流,则对它的兄弟元素没有影响
absolute和fixed均属于绝对定位
相对定位
特点:
- 是相对于自身原有位置进行偏移
- 仍处于文档流中,也就是占用文档空间,对它的兄弟元素仍会有影响
- 随即拥有偏移属性和z-index属性
绝对定位
特点:
- 基于已经定位的祖先元素进行定位
- 脱离了文档流,不会对兄弟元素产生影响
- 随即拥有了偏移属性和z-index属性
- 如果设置绝对定位的元素没有设置width,那么它的width就等于其内容的宽度,类似于设置了float的元素
注意:已经定位的祖先元素指的是祖先元素设置了相对定位、绝对定位或固定定位中的任一种定位
如果对元素设置了绝对定位,没有设置偏移量,且没有已经定位的祖先元素,则该元素仍然处于它的初始位置
设置偏移量
- 如果没有已经定位的祖先元素,则相对于<html>标签进行偏移
- 如果有已经定位的祖先元素,则相对于其最近的已经定位的祖先元素进行偏移
使用绝对定位进行两列布局
常用于一列固定宽度,一列自适应宽度的布局
主要应用技能:
- 父元素使用:relative
- 需要自适应宽度的列使用absolute
注意:因为设置了absolute的元素,脱离了标准文档流,所以其无法撑开父元素,因此必须使固定宽度列的高度 > 自适应宽度列的高度