用户投稿CSS 比较常用的有3种定位方式：
positionfloatflex以新手来说，一开始学习定位的方式，以position居多。
其中最容易令人搞混的是position的relative与absolute属性。
本章节要来探讨这两种属性的差异，以及产生的结果。
HTML
<body> <div class="box-before"> box-before </div> <div class="box-1"> box-1 <div class="box-2"> box-2 </div> <div class="box-3"> box-3 </div> </div> <div class="box-after"> box-after </div></body>CSS
body { background-color: khaki; font-family: Helvetica;}.box-before { width: 300px; height: 50px; color: white; font-size: 20px; background-color: #2e5ec0;}.box-1 { width: 300px; padding: 10px; color: white; font-size: 20px; background-color: #fd3c40; box-sizing: border-box;}.box-2 { height: 50px; color: white; font-size: 20px; background-color: #8c4fb6;}.box-3 { height: 50px; color: white; font-size: 20px; background-color: #00b842;}.box-after { width: 300px; height: 50px; color: white; font-size: 20px; background-color: #faaa20;}初始页面
第一层有3个div，依序为box-before、box-1、box-after。
box-1内有box-2、box-3。
未使用position的话，预设会套用position:static。
relative
设定box-1
position: relative;跟刚刚的一模一样，因为我们还未定top 、 right 、 bottom 和 left 属性。
设定
top: 30px;left: 20px;box-1往下移动30px、往右移动20px。
虚线代表box-1原本的位置(position:static)。
所以
position: relative;top: 30px;left: 20px;box-1相对于原本的位置(position:static)，往下移动30px、往右移动20px。
仍佔据原本的位置(position:static)。
其他元素(box-before、box-after)的定位不受影响。
元素会重叠。
将所有的CSS回复到初始状态。
这次，我们设定box-2
position: relative;top: 30px;left: 20px;box-2往下移动30px、往右移动20px。
结果一样。
absolute
设定box-2
position: absolute;top: 30px;left: 20px;页面显示
完全走钟...
就几个问题来一一探讨。
1. box-3往上移动
只要position设定absolute，该元素就会完全跳脱该页面，这概念类似Photoshop的图层，跳脱的元素位于该页面上一层图层。换个说法，它浮在页面之上。
既然如此，box-2原本所占用的空间将不复存在，所以box-3便会往上移动。
2. box-2宽度改变
我们一开始没有设box-2的宽度，所以宽度会完全撑开至box-1的边界，这是block元素的特性。
当box-2跳脱该页面后，也意味着，它脱离了父元素box-1的範围，宽度就以内容为基準。
3. 定位的相对元素在哪？
大魔王 本文重点
这是很多新手搞不清楚的地方。
当元素的position设定absolute后，它就会往外层的元素找是否有position:relative | absolute | fixed | inherit(若继承的是前面3个之一)的元素，若是都没有，就会以该网页页面(<body>)的左上角为定位点。
box-2的外层元素都没有设定position:relative | absolute | fixed | inherit，自然会以页面的左上角为定位点，往下移动30px、往右移动20px。
若
position: absolute;top: 0;left: 0;box-2完全贴齐页面的左上角。
把top跟left通通删掉，只留position: absolute。
若没有设定任何偏移属性的话，box-2的位置将遵照原本的位置(position:static)，但依旧会跳脱原本页面。
若设定任一边属性值，将以此为主。
position: absolute;top: 0;贴齐上边界。
position: absolute;left: 0;贴齐左边界。
设box-1为定位元素。
box-1
position: relative;box-2
position: absolute;right: 0;bottom: 0;box-2就会以box-1为定位元素，贴齐右下角。
不会受到box-1的padding属性影响。
可设定负数。
position: absolute;right: -20px;bottom: -20px;就会超出box-1的範围。
微信扫一扫打赏
支付宝扫一扫打赏
