CSS+DIV定位浅析

在用CSS+DIV举办机关的时辰，一向对position的四个属性值relative,absolute,static,fixed分的不是很清晰，甚至常常会呈现让人很忧郁的功效。本日研究了一下，总算有所相识。在此总结一下：

先看下各个属性值的界说：

1、static：默认值。没有定位，元素呈此刻正常的流中（忽略 top, bottom, left, right 可能 z-index 声明）。

2、relative：天生相对定位的元素，通过top,bottom,left,right的配置相对付其正常位置举办定位。可通过z-index举办条理分级。

3、absolute：天生绝对定位的元素，相对付 static 定位以外的第一个父元素举办定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性举办划定。可通过z-index举办条理分级。

4、fixed：天生绝对定位的元素，相对付赏识器窗口举办定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性举办划定。可通过z-index举办条理分级。

static与fixed的定位方法较好领略，在此不做说明。下面临应用的较多的relative和absolute举办说明：

1、relative。定位为relative的元素离开正常的文本流中，但其在文本流中的位置依然存在。如图1：

图1

黄色配景的层定位为relative，赤色边框地区为其在正常流中的位置。在通过top、left对其定位后，从灰色配景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层离开正常文本流，但与relative的区别是其在正常流中的位置不在存在。如图2：

图2

可以看到，在将黄色配景层定位为absolute后，灰色配景层自动补上。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!