相对定位和绝对定位的理解与应用

        css中的position中有四个值：static(默认值)、relative、absolute、fixed。接下来主要介绍relative（相对定位）和absolute（决定定位）。

给出5个相同属性不同颜色的div：

html:

css:

效果图：

一、相对定位(relative)：

relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局。

给第二个box设置relative：

元素相对于原来位置偏移，宽高都没变，撑大了容器。

css:

效果图：

二、绝对定位(absolute)：

absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位。

说明：元素在没有定义宽度的情况下，宽度由元素里面的内容决定，效果和用float方法一样。

只给第五个box设置absolute：

css:

效果图：

absolute定位原理剖析：

1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。

css:

效果图：

2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。

补充：网上有人解释为元素会相对于第一个不是static的父元素定位，我觉得这很容易让人产生误解。以上是我自己的定义。

现在给body元素一个绝对定位（body元素设置为了absolute，整个容器的宽度由最长div决定，宽度变小了）：

下面给html元素一个绝对定位，相对于body定位的box5距离文字box1要远一点。所以在没有父元素设置相对定位或绝对定位的情况下，设置了absolute的元素会相对于html根元素定位。

再来验证这句话：父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位。

现在给box们套三个父容器，如下：

html：

css:

现在的样子，现在的box5并不是所说的相对于第一个不是static的元素定位（按这句话的说法，现在我的box5应该相对于最外层容器1偏移才对），而是相对于离自己最近的一层的设置了相对或绝对定位的父元素定位：

现在把第二个容器和第三个容器的position注释掉（没有position，设置top、left、bottom、right值都没有效），结果如下：

现在box5的外层设置了相对或绝对的父元素只有最外层容器1，所以box5现在相对于最外层容器1定位。（明显box5移动了）