css常用的四种定位类型static、relative、absolute、fixed。要清楚的理解四种定位类型，首先要知道什么是文档流？
什么是文档流？
normal flow（普通流），元素在html中的排列方式——块级元素独占一行垂直排列，内联元素在行内从左至右依次排列
静态定位（static）
static定位，也叫静态定位，是html元素默认的定位方式，它遵循正常的文档流，占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。
相对定位（relative）
relative定位，也叫相对定位，根据原本在文档流中的位置进行偏移，遵循正常的文档流，但是top、right、left、bottom属性是生效的，最重要的是相对定位会占用原本的文档空间。
如下图所示，虽然红色方框相对虚线方框（原本位置）进行偏移，但是仍然占据原本的文档空间，所以绿色方框位置不会改变，并且红色方框的偏移会覆盖其他方框。
<style type="text/css">
.red{position: relative; top: 20px; left: 20px;}
</style>
image.png
绝对定位（absolute）
absolute定位，也叫绝对定位，使用绝对定位的元素脱离文档流，只能根据祖先类元素(父类以上)进行定位，而且这个祖先类还必须是以position属性非static方式定位的。 举个栗子，若a元素使用绝对定位，它会从父类开始找起，寻找以position属性非static方式定位的祖先类元素，直到<html>标签为止。这里还需要注意的是，relative和static方式在最外层是以<body>标签作为定位原点，而absolute方式是以<html>标签作为定位原点。<html>和<body>元素相差8px左右的margin。
如下图所示，红色虚线框使用绝对定位，绿色虚线框使用相对定位。
<style type="text/css">
.green{border: 2px dotted green; position: relative;}
.red{border: 2px dotted red; position: absolute; top: 0px; left: 0px;}
</style>
image.png
绝对定位使元素的位置与文档流无关，因此不占据文档空间，这一点与相对定位不同。
为什么absoulte定位要加 top: 0px; left: 0px; 属性，是不是多此一举呢？
其实加上这两个属性是完全必要的，因为我们如果使用absolute和fixed定位的话，必须指定top、right、bottom、left属性中的至少一个，否则top、right、bottom、left属性会使用它们的默认值auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占据文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意！
少了top、right、bottom、left属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：
如果top和bottom同时存在，那么只有top生效。
如果left和right同时存在，那么只有left生效。
固定定位（fixed）
fixed定位，又叫固定定位，它和absolute定位一样，脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。但不同的是，fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。
网友评论