摘要：和不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。的绝对定位元素的定位永远是相对于浏览器边界的，和其他元素没有关系。
1.引言
在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。
如果没有定位，我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过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
js
jq
上图中，大家应该要识别出两个信息（相信大部分人会忽略第二个信息）
第三个
发生了位置变化，分别向右向下移动了10px；
其他的三个
位置没有发生变化，这一点也很重要。
因此，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下文，下文有关于定位上下文的详细介绍，这里可以先通过一个例子来展示一下区别：
注意看这两图的区别，下文将有解释。
3.absolute 绝对定位（相对于“定位上下文”）说到absolute，推荐大家去看一个视频教程，讲师张鑫旭对absolute讲的非常透彻，本文的一些内容也是参考了这篇教程，好东西大家一起分享！
先写一个基本的页面——4个
html
css
jsjsjsjsjs
jq
然后，我们把第三个
改为absolute，看看会发生什么变化。
html
css
js
jq
从上面的结果中，我们能看出几点信息：
absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构）
absolute元素具有“包裹性”。之前
的宽度是撑满整个屏幕的，而此时
的宽度刚好是内容的宽度。
absolute元素具有“呆滞性”（不让它动，它就不动）。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。
absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。
最后，通过给absolute元素设置top、left值，可自定义其位置，这个都是平时比较常用的了。这里需要注意的是，设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。下文马上会讲定位上下文。
最后，再提几个小知识点。
设置absolute会使得inline元素被“块”化，这在上一节讲display时已经说过；
设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多；
上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”。
4.fixed 绝对定位（相对于“浏览器”）其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。
上文很多次提到了“定位上下文”，那么它到底是一个什么东东？答案马上揭晓。
5.定位上下文 5.1 relative的相对定位relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
5.2 fixed的绝对定位fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
5.3 absolute的绝对定位如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？
答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：
可见，定位上下文就是absolute用来定位的“某一层祖先元素”。
此时，再看前面提到的那个图，应该就能理解了：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112108.html
摘要：本系列文章重拾主要参考王福朋知多少，结合自己的理解和学习需要，修改或添加了一些内容，难免有失偏颇，仅供自我学习参考之用。 工作中或多或少的写一些css，但总感觉掌握的不够扎实，时而需要查阅一下知识点。我想，一方面跟缺少科班出身式的系统学习有关，另一方面也苦于一直未寻觅到一套合我胃口教程。直到我读到了王福朋css知多少系列文章，使我有了重新系统学习css的想法。 本系列文章（重拾css）...
摘要：浏览器默认样式中规定了元素哪些属于块剩下的就是流。上图可知，针对的标签，你设置宽度和高度是无效的，通过监控可以知道，该元素实际的宽度和高度都是，并不是我们设定的值。因此，的特点可以总结为外部看来是流，但是自身却是一个块。 1.引言 html元素，除了块就是流（即平时常说的块级元素和行内元素），而且流都包含在块中，例如body就是一个块，而a就是一个流。浏览器默认样式中规定了html元素...
摘要：也就是说我们操作的几何公式中的未知变量，而具体的画图操作则由渲染引擎处理，而不是我们苦苦哀求设计师帮忙。 前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/right-radius的水平半径之和大于元素宽度时，实际值会按比...
摘要：本系列将稍微深入探讨一下那个貌似没什么好玩的魔法堂重拾之解构魔法堂重拾之图片作边框魔法堂重拾之不仅仅是圆角魔法堂重拾之更广阔的遐想解构说起我们自然会想起，而由条紧紧包裹着的边组成，所以的最小操作单元是。 前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现...
摘要：如果我们以为重点看，从上图中我们可以总结出学习的三个突破点。这次我们向浏览器这位机器人学习一下，看看它写出来的能给我们什么帮助。对选择器来说，有一个很重要的话题级别。布局布局是的重头戏，每个系统的布局都有其各自的特点。 众所周知，css的运行环境是浏览器，那么我们有必要先来认识下浏览器。 1.浏览器是怎样工作的 有篇文章叫《浏览器的工作原理：新式网络浏览器幕后揭秘》，文中言简意赅的介绍...
阅读 2291·2021-11-24 09:39
阅读 3758·2021-11-19 09:40
阅读 2130·2021-09-27 13:36
阅读 1874·2019-08-30 15:44
阅读 376·2019-08-30 13:52
阅读 2689·2019-08-30 11:13
阅读 2120·2019-08-29 16:18
阅读 1739·2019-08-29 15:43
