CSS布局之position详解

1. 网页元素的三种布局模型

• 流动模型（Flow）
  • 是默认的网页布局模型
  • 块状元素会自上而下按顺序，垂直延伸分布，因为块元素都独占一行
• 内联元素会从左到右水平分布
• 浮动模型 (Float)
  • 浮动布局的核心，是让元素脱离普通流，然后使用width/height,margin/padding将元素定位
• 可以设置浮动让块状元素并排显示
• 层模型（Layer）

2. 层模型详解

• 默认：position: static
• 继承：position:inherit
• 绝对定位：position: absolute
• 相对定位：position: relative
• 固定定位：position: fixed

说明：

• 占位空间：元素在文档流中所占据的空间
• 物理空间：元素本身所占据的空间

１.position:absolute

• 元素会脱离文档流，周围元素会忽略它的存在，left; right; top;bottom属性值有效
• 以最近的position不为static的祖先元素为参照物，如果不存在则相对于body元素，即浏览器窗口

<div style="position: absolute">Im an absolute element</div>
<div>Im a default element</div> //结果会重叠

![](http://upload-images.jianshu.io/upload_images/3087126-406efd7a5e28e5ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

２. `position:relative`
+ 元素不会脱离文档流，周围元素不会忽略它的存在，`left; right; top;bottom`属性值有效
+ 相对定位完成的过程
 + 首先按`static(float)`方式生成一个元素(并且元素像层一样浮动了起来)
 + 然后相对于以前的位置移动，移动的方向和幅度由`left、right、top、bottom`属性确定，偏移前的位置保留不动
+ ```
<div style="position: relative;top:100px;left:100px">Im a relative element</div>
<div>Im a default element</div>

３. position: fixed

• left; right; top;bottom属性值有效
• 与absolute定位类似，但它是相对视图（网页窗口）移动的，当页面宽高超过窗口的时候，fixed的元素会悬浮在那里，我们在页面上看到的跟着滚动条走得悬浮块都是这么做的

４. position: static

• left; right; top;bottom属性值无效

５. position:inherit

• 继承父元素的position值

相关文章推荐:
深入学习CSS布局系列（一）布局常用属性
学习CSS布局
CSS常见布局
CSS Grid布局：什么是网格布局

Flex 布局教程