浅谈CSS中【position（定位）】中的relative和absolute

Author：天添豆浆
计算机科学与技术专业，迷摇滚的理科男
新手村码农，第七篇博客，感觉CSS中position的概念略模糊，梳理一下

position概述

Position，这个属性定义建立元素布局所用的定位机制。——搜狗百科

tips：下面z-index、top、right、bottom、left、clip都要配合position才能使用

背景

html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素脱离正常的文档流，css中定位主要包含以下属性：

position：设置定位方式

• relative: 相对定位(不会导致元素脱离文档流)
• absolute: 绝对定位(元素会脱离正常的文档流)
• fiexd: 固定定位(脱离正常文档流)
• static(默认值)

• z-index：层叠顺序（必须配合绝对定位一起使用，数值越大越置顶）
• left：元素与父容器左边的距离
• right：元素与父容器右边的距离
• top：元素与父容器上边的距离
• bottom：元素与父容器下边的距离

看看CSS参考手册中的文档 ：

示例：

• relative，相对的，不会导致元素脱离文档流：
  
• absolute，绝对的，元素对象会脱离文档流：
  

脱离文档流，就是独立出来，不会影响其他的元素