而浮动的元素不能用
CSS的定位属性有三种，分袂是绝对定位、相对定位、固定定位。
position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 -->
相对定位相对定位：让元素相对付本身本来的位置，进行位置调解（可用于盒子的位置微调）。
格局：
position: relative; left: 50px; top: 50px;
相对定位的举例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> body{ margin: 0px; } .div1{ width: 200px; height: 200px; border: 1px solid red; } .div2{ position: relative;/*相对定位：相对付本身本来的位置*/ left: 50px;/*横坐标：正值暗示向右偏移，负值暗示向左偏移*/ top: 50px;/*纵坐标：正值暗示向下偏移，负值暗示向上偏移*/ width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="div1">有生之年</div> <div class="div2">狭路相逢</div> </body> </html>
效果：
相对定位：不脱标，qq空间访问权限怎么破解 ，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以处处飘。
相对定位的用途如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个感化：
（1）微调元素
（2）做绝对定位的参考，子绝父相
相对定位的定位值
left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移
PS：负数暗示相反的标的目的。
↘：
position: relative; left: 40px; top: 10px;
↙：
position: relative; right: 100px; top: 100px;
↖：
position: relative; right: 100px; bottom: 100px;
↗：
position: relative; left: 200px; bottom: 200px;
如果要描述上面这张图的标的目的，我们可以首先可以这样描述：
position: relative; left: 200px; top: 100px;
绝对定位绝对定位：界说横纵坐标。原点在父容器的左上角或左下角。横坐标用left暗示，纵坐标用top或者bottom暗示。
格局举例如下：
position: absolute; /*绝对定位*/ left: 10px; /*横坐标*/ top/bottom: 20px; /*纵坐标*/
绝对定位脱标绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
绝对定位的参考点（重要）（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/29324.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")