在div+css布局中relative,absolute,static,fixed定位的区别与应用详解

打印本文 字体大小: 时间:2016-04-26  来源:  作者:

我们在进行网页布局时,尤其是出现下拉菜单、层的浮动和覆盖时,常常要对div元素进行精确或相对的定位,就要设置static,absolute,relative与fixed等定位方式,下面我们对应用的较多的relative和absolute进行分析:

一、CSS中absolute与relative的区别和联系

首先,向大家简单描述一下CSS中absolute与relative的区别和联系,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

1、Absolute:

CSS中的写法是:position:absolute;他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据最近一级有定位设置的父级的原始坐标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。可通过z-index进行层次分级。

详解在div+css布局中的absolute与relative定位

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

2、Relative:

CSS中的写法是:position:relative;他的意思是相对定位,他是参照最近一级有定位设置的父级元素的原始点为原始点无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位可通过z-index进行层次分级。

详解在div+css布局中的absolute与relative定位

有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。


absolute则会找他的父元素,直到找到一个position属性不是static的父元素,可能是它的上一层,也可能是好几层,如果都没有定义position属性的话,那将根据body定位.
还有一个区别是:relative的元素,不管你怎么改变top或是left,他原来的那一块div的位置还是存在着的,会占着那边.如果有人挤掉了那一块,那他的位置也会改变.
如果是absolute的话,他就不占位置了,除非自己所定位的父元素产生改变,不然就不会改变.

二、详解CSS+DIV布局定位

在用CSS+DIV进行布局定位的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:

先看下position各个属性值的定义:

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:

relative定位

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

2、absolute。

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

absolute定位

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

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:

relative和absolute定位

图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

relative和absolute定位

可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

relative和absolute定位

除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。


注:在javascript里,offsetParent这个属性可以得知元素是根据什么来定位的.


相关阅读

全部评论()
全部推荐(0)