position：relative and absolute

 很多学习布局的同学，都卡在定位这块，难就难在相对定位与绝对定位的配合上，不知道他们两个之间具体有什么区别。

        这节课虽然文字性的内容比较多，但是基本上每一句话都很重要，如果想学好，那就耐下心来仔细看，对教程中的每个假设都要自己验证，自己总结规律，如果自己懒的证明，那就记住本节最后的话就行了。

好，上课！

提问： 如果页面内某个元素没有设定position属性，那么他是否具有position属性？
回答： 具有position属性，并且属性值是static。原因在于网页里任一元素的默认position属性值均是static（静态）。

上面这个问题主要是给大家补充一个知识点，很多Web前端开发工程师都不知道这点，所以在这节开头给大家补补课。

这节课主要讲讲 absolute （绝对定位）和  relative （相对定位）。



【position:absolute】
意思是：绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。
为了让大家更容易理解这句话，我们举个例子

例子
制作一宽度为200px，高度为200px，背景色为红色(#900)的方块，距离浏览器左侧220px，距离浏览器顶部为100px，效果：

分析： 如果想实现这个效果，我们用外边距也是可以实现的，但是我们这节学的是定位，那么我们就要用定位的知识来实现。

要知道，当一个元素具有了定位属性（特指绝对定位和相对定位）后，想把它精确定位于某一个位置，只需要设置TRBL中的任意相邻的两个就可以，针对上面的例子我们用left和top

HTML代码：

1. <div>定位</div>

复制代码

CSS代码：

1. body,div{margin:0; padding:0;}
   
2. div{width:200px; height:200px; background:#900; position:absolute; left:220px; top:100px;}

复制代码

源代码：     定位1.rar (1.16 KB, 下载次数: 388) 


绝对定位具有以下属性： （下面的这些属性大家自己证明，对于下面说的“父级”，就是在原有的盒子外面，在套一层宽度和高度大于原有盒子尺寸的盒子）

• 
  
  
• 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
• 如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
• 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
  

以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：

• 
  
  
• 设定TRBL
• 父级设定Position属性
  

上面的这个总结非常重要，可以保证各位在用absolute布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。

只要有一点不满足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点，已经定位好的版块，当浏览器的大小改变，父级元素会随之改变，但是设定Position属性为absolute的板块和父级元素的位置发生改变，错位了，这就是因为此时元素以浏览器的右上角为原点的原因。




【position:relative】
意思是：相对定位，他是默认参照父级的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

为了帮助大家理解上面的那句话，还是拿个例子来说明
例子：
制作一宽度为400px，高度为300px，背景色为灰色(#ccc)的方块，水平居中于浏览器，id为div1，在div1内，制作一宽度为100px，高度为100px，背景色为绿色(#090)的方块。效果：

HTML代码

1. <div id="div1">
   
2.     <div id="div2"></div>
   
3. </div>

复制代码

CSS代码

1. body,div{margin:0; padding:0;}
   
2. #div1{width:400px; height:300px; background:#ccc;margin:0 auto;}
   
3. #div2{width:100px; height:100px; background:#090; position:relative; }

复制代码

从上面代码是不是可以看出，相对定位的元素div2是以父级div1的左上角为原始点的，如果需要将div2定位于div1的某处的话，肯定需要TRBL中的任意相邻两个，现在将div2定位于div1内（80px,60px）处，也就是div2距离div1的左边为80px，顶部为60px，效果如下：

为了达到这个效果，只需要给div2一个left和top的值就可以了

1. #div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

复制代码

此步源代码：     定位2.rar (1.19 KB, 下载次数: 294) 

如果现在我们再给div1一个内边距padding:50px，那么div2以哪里为原点呢？
html代码没变和上面一样，下面只列出CSS代码

1. body,div{margin:0; padding:0;}
   
2. #div1{width:300px; height:200px; background:#ccc; margin:0 auto; padding:50px;}
   
3. #div2{width:100px; height:100px; background:#090; position:relative; left:80px; top:60px; }

复制代码

效果如下：（斜线部分为内边距区域，在实际效果中是不没有的）

现在知道div2以哪里为原点了吧~



相对定位有以下属性： （同样大家在下面自己证明）

• 
  
  
• 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolute不同)。
• 如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolute不同)
• 如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。
  

以上三点可以总结出，无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

综合上面对relative的叙述，我们就可以将position属性为relative的div视成可以用TRBL进行定位的普通div，或者说只要将我们平时布局页面的div的 CSS 属性中加上position:relative后，就不只是用float布局页面了，还可以用TRBL进行布局页面了，再或者说加上position:relative的div也可以像普通的div进行布局页面了，只不过还可以用TRBL进行布局页面。

但是，position属性为absolute不可以用来布局页面，因为如果用来布局的话，所有的DIV都相对于浏览器的左上角定位了，所以只能用于将某个元素定位于属性为absolute的元素的内部某个位置，这样我们就可以总结比较重要的结论

属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，如果父级元素没有position属性那么absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览器左上角为原点了，所以父级元素的position属性只能为relative！
=============================================
总结：如果用定位来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用relative，计算的时候不要忘记计算padding的值。