前端开发教程CSS（三） - 定位模型 - position定位详解（absolute、fixed、relative、static）

文档流布局的概念

将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。
每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。
内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。
有三种情况将使得元素脱离文档流而存在，分别是 浮动，绝对定位， 固定定位。 但是在IE6中浮动元素也存在于文档流中。

内容总结

absolute绝对定位

生成绝对定位的元素，相对于 static（position默认值） 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。脱离文档流不占空间

fixed固定定位

由绝对定位衍生出来，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

（联想网站右上角的logo，滚动浏览器窗口时不会改变位置，脱离了文档流）

relative相对定位
生成相对定位的元素，相对于其正常位置进行定位。
因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。脱离文档流，占空间

static默认值
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit
规定应该从父元素继承 position 属性的值。
static 默认值，就是没有定位。inherit 继承父元素，基本上这个参数用得相当少。

一、absolute绝对定位

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。

个人理解：生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外

position_absolute

二、fixed固定定位

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

个人理解：fixed相对于window固定，滚动浏览器窗口并不会使其移动，会脱离normal flow。

position_fixed

三**、relative相对定位**

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

个人理解：相对于normal flow中的原位置来定位。

position_relative

[

四**、**static默认值

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

个人补充：static是position的默认值。

position_static

[

很多时候跟着书和网站查找资料学习，会发现没有目标，学了很多却不知道自己到底能够做出什么成绩。要有一个清晰的职业学习规划，学习过程中会遇到很多问题，如果你对前端这门技术感兴趣，可以到我们的前端学习q-u-n【 784783012 】，基础，进阶。从企业招聘人才需求 到怎么学习前端开发，和学习什么内容都有免费系统分享，让你无论是自学还是找相应的培训都能让你少走弯路。希望可以帮助你快速了解前端，学习前端

点击：加入