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是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。
网友评论