CSS-position:static/relative/absolute/fixed定位

6,049
  • static(静态定位) 对象遵循标准文档流中,top, right, bottom, left 等属性失效。

  • relative(相对定位) 对象遵循标准文档流中,依赖top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移,同时可通过z-index定义层叠关系。

  • absolute(绝对定位) 对象脱离标准文档流,使用top, right, bottom, left 等属性进行绝对定位(相对于static定位以外的第一个父元素进行绝对定位) 同时可通过z-index定义层叠关系。

  • fixed(固定定位) 对象脱离标准文档流,使用top, right, bottom, left 等属性进行绝对定位(相对于浏览器窗口进行绝对定位)同时可通过z-index定义层叠关系。

迷糊不?(迷糊就对了,但是上面的基本定义在前端面试中是需要对答如流滴),下面我们通过实验来加深理解。

  • 标准文档流
    标准文档流指在不使用其他与排列和定位相关的特殊CSS规则时,元素的默认排列规则。

HTML文档中的元素可以分为两大类:行内元素和块级元素。 1.行内元素,是DOM树中的一个节点。不占据单独的空间,依附于块级元素,行内元素没有自己的区域。

2.块级元素,是DOM树中的一个节点。总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。

盒子在标准流中的定位原则:
margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。
(1)行内元素之间的水平margin
当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。 (2)块级元素之间的竖直margin
两个竖直排列的块级元素,它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和,而是两者中的较大者。这在实际制作网页的时候要特别注意。
(3)嵌套盒子之间的margin
这时子块的margin以父块的content为参考进行排列。
(4)margin设为负值
会使设为负数的块向相反的方向移动,甚至会覆盖在另外的块上。

1. static

默认的position值,无特殊定位,遵循标准文档流,不做过多解释。

这里写图片描述
图一:标准文档流

2. relative

这里写图片描述
图二:相对定位

由图二可见,relative是相对该对象处于标准文档流中的位置依据left,top进行定位(当然还可以使用right,bottom,本例仅作实验说明,其余读者自行验证),left,top 并不改变该对象原本在文档流中的占位空间。

这里写图片描述
图三:相对定位

由图三可见,当设置了margin属性时,该对象在标准文档流中的占维空间也随之改变。 同理,padding也会改变相对定位的对象在标准文档流中的占维空间,如图四。

这里写图片描述
图四:相对定位

至此,relative(相对定位)大家已经很清楚了吧,下面看下absolute的用法。

3. absolute

这里写图片描述
图五:绝对定位

由图五可见,绝对定位脱离标准文档流,相对于static定位以外的第一个父元素,使用left,top(或right,bottom)进行绝对定位。值得一提的是在使用absolute定位时,必须指定left,top,right,bottom中的至少一个(否则left/right/top/bottom属性会使用它们的默认值 auto ,这将导致对象遵从标准文档流,在前一个对象之后立即被呈递,简单讲就是都变成relative,会占用文档空间)。

如果同时设置了left/right 属性,那么left生效。同理top/bottom同时存在时,top生效。

这里写图片描述
图六:绝对定位

这里写图片描述
图七:绝对定位

由图六、图七可见,absolute实质上是相对于static定位以外的第一个父元素的border进行定位。

同时绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

4. fixed

这里写图片描述
图八:固定定位

由图八可见,fixed定位也脱离了标准文档流,与absolute不同的是fixed是根据窗口为原点进行偏移定位的,也就是说它不会根据滚动条的滚动而进行偏移。

5. z-index

如果两个同级元素的此属性具有同样的值,那么将依据它们在HTML文档中流的顺序层叠,写在后面的将会覆盖前面的。需要注意的是,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

关于position定位,以上。 另外上面的实验均在jsfiddle.net/上完成。