1。Introduction在学习定位之前，我们应该思考一个问题：什么情况下我们需要定位？如果没有定位，我们将无法满足什么样的需求？我们要知道，人类创造的每一条知识都有它的用处，都必须解决以前遇到的一些问题。如果没有定位，我们制作的网页会从上到下，从左到右一步一步平铺在浏览器上，加上通过margin和padding调整间距，通过float浮动一些元素。做一些简单的网页就够了，比如N年前的yahoo，虽然现在看起来很low。但在某些情况下，这种按部就班的网页布局并不能满足我们的要求。我们需要一些元素出来，漂浮在网页上，需要给它指定一个位置。这时候我们就需要用到position，而且必须用到。如下图所示：position有五个可选属性：static/relative/absolute/fixed/inherit。其中，static（静态定位）为默认值，即如果所有元素都没有设置其他position值，则其position值为static，和没有它一样，inherit就是继承position的值来自父元素的属性。我就不多介绍了。2.relative相对定位相对定位relative可以很容易地用一个例子来演示。比如我们写4个
，底色是灰色，不用看就知道长相。
html
css
js
jq
然后我们添加position:relative并设置第三个Left和top值，看看这个
会发生什么。
html
css
jq
图片以上，你应该认得两条信息（相信大多数人都会忽略第二条信息）。第三个的位置发生了变化，分别向右和向下移动了10px；其他三个
的位置也很重要，没有任何变化。因此，relative会引起自身位置的相对变化，而不会影响其他元素的位置和大小的变化。这是相对的要点之一。还有第二点，就是relative产生了新的定位上下文。下面详细介绍定位上下文。这里可以举个例子来说明区别：注意两张图片的区别，下面会说明。3.absolute绝对定位（相对于“定位上下文”）说到absolute，推荐大家看视频教程。绝对的讲师张新旭讲解的非常透彻。本文的部分内容也参考了本教程。好东西分享给你！先写一个基础页面——4
html
css
jsjsjsjs
jq
然后，我们把第一个改成三个绝对值，看看会发生什么。
html
css
jq
上面的结果，我们可以看到几条信息：绝对元素脱离了文档结构。与relative不同的是，其他三个元素的位置是重新排列的。每当元素脱离文档结构，导致父元素崩溃时，它就可能具有破坏性。（此时你应该能马上记起来，float元素也会脱离文档结构）absolute元素是有“wrapping”的。以前，的宽度是填满整个屏幕，但现在
的宽度只是内容的宽度。绝对元素有“呆滞”（不让它动，它不动）。absolute元素虽然脱离了文档结构，但是它的位置没有变，还是老老实实的留在原来的位置，因为此时我们还没有设置top和left的值。absolute元素会浮在页面上方，会挡住下方页面的内容。最后，通过给absolute元素设置top和left值，可以自定义它的位置，这个通常比较常用。这里需要注意的是，设置top和left值时，元素是相对于最近的定位上下文定位的，而不是相对于浏览器定位的。我们稍后会讨论定位上下文。最后再补充几个知识点。设置absolute会导致内联元素被“阻塞”，这个在上一节讲显示的时候已经提到；设置绝对将使元素的现有浮动无效。但是同时使用float和absolute的情况并不多；如上所述，absolute将使元素浮动在页面上方。如果有多个悬浮元素，如何确定级别？答案是“后来者为上”。4.fixed绝对定位（相对于“浏览器”）其实和fixed和absolute是一样的，唯一的区别是：absolute元素根据最近的定位上下文来确定位置，而fixed总是根据浏览器来确定位置。上面多次提到了“定位上下文”，那么它到底是什么呢？答案马上揭晓。5.定位上下文5.1relative相对定位相对元素的定位总是相对于元素本身的位置，与其他元素无关，不会影响其他元素。5.2fixed的绝对定位fixed元素的定位总是相对于浏览器的边框，与其他元素无关。但它具有破坏性，会导致其他元素位置发生变化。5.3absolute的绝对定位如果top和left设置为absolute，浏览器会用什么来确定它的垂直和水平偏移量？答案是浏览器会递归搜索该元素的所有父元素。如果它找到一个设置了position:relative/absolute/fixed的元素，它将基于该元素进行定位。如果没有找到，将基于浏览器边界定位。如下两图所示：可见，定位上下文就是absolute用来定位的“某层祖先元素”。此时再看看前面提到的这张图，你应该能明白：