本文主要是介绍CSS 相对|绝对(relative/absolute)定位系列（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1. 绝对定位和浮动元素是近亲：都具备包裹性和破坏性
包裹性：包裹性换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度
破坏性：浮动的破坏性在于切断line box链，致使高度塌陷，但由于浮动元素仍在凡间（DOM tree），实体是看得见摸得着的，所以其占据的实体位置还是在的。而absolute绝对定位不仅让高度塌陷，又由于从未深入凡间，在凡间没有他的实体位置，所以宽度也是塌陷的
2. position:absolute的滥用
首先自己是个流体布局控，绝对定位这种东西，显然没有流动的气质，尤其拿来定位后（虽然有时候在relative的庇护下也有一定的流动性）。流动性布局很强调不定宽，不定高，活用标签自身属性，顺其自然，最少干预。但是由于absolute属性（尤其是带有left/top值）的破坏性，会导致高宽塌陷，于是，不得已，需要设定一个高度值（或是足以撑开高度的值），例如新浪微博导航就是绝对定位，于是，导航外标签必须定高，否则，下面的元素会上来发生重叠
3. 常见absolute布局的替代实现方案
我们极易先入为主地认为absolute的价值就是借助left/top属性来进行定位的。说句不严谨的话，目前估计超过90%的普通布局中的absolute属性都是用在定位上了。恩，这个回头再说，这里还是看看一些常见的absolute布局如何通过使用其他属性完成同样的布局效果。既然absolute属性是拿来定位，我们只要使用其他属性定位就可以了。此时，自然而然想到了CSS中另外一个更加低调全能的定位属性margin，下面的前两个例子都是使用margin代替absolute及相关属性。
首先拿京东商城首页的一个标价样式举例，见下截图：
用小bug一看其code实现，果然是绝对定位+定位属性
要是我来实现，就不会使用absolute属性，会使用margin实现扩展性容错性更强的布局
因为价格是一个占据整行的div且位置和手机的位置在水平方向上始终是一样的，所以只要设定固定的margin就能保证不论是改变父容器宽度或者定位方式都可以很好的展现，同时将标价外面的div标签改为inline水平元素的标签方便inline-block化(行内元素设置了position属性或float属性后属性默认变成inline-block，所以可以设置宽高，span 是行内元素，不设display=”block”或“inline-block”是没办法设宽高的)
4. absolute可以一个人战斗
我们需要意识到，一个应用的position:absolute的元素，其实就只是个非常普通的元素，我感觉与应用了float:left的差异仅仅在于宽度的缺失
点击示意的按钮后，可以发现图片还是那个图片，还在那个位置，还是那么的安静与优雅。唯一变化的就是文字们有的跑到它的下面了（宽度缺失）
由此可见，absolute属性只是个很普通的属性，跟float:left是个近亲。一个是陨落凡间的恶魔，一个是天空中的恶魔。所以，很多时候，我们在普通布局中使用到absolute时候，只要单单设置一个position:absolute就可以了，至于left/top之类的都是浮云，涉及到定位什么的就把该元素当作普通元素，使用margin进行定位，一样有着刮目的表现的
总结：
1.无依赖的绝对定位元素其一的属性是脱离文档流
2.无依赖的绝对定位元素(不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值)存在一个非常大的特效，就是位置跟随性，也就是这个元素在普通元素的时候呆在什么位置，绝对定位之后就还是呆在什么位置，原来是block属性absolute之后还是block属性，原来是inline-block属性absolute之后还是inlne-block属性
3.在设置了overflow属性的元素内部设置的absolute元素，是不会受到overflow属性的限制的，即使设置为hidden
4.绝对定位的元素虽然具备跟随的特性，但是如果我们想精确的进行定位，那么应该使用margin，这里和普通元素使用margin的效果是一样的
5.生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
这篇关于CSS 相对|绝对(relative/absolute)定位系列（一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
