css中如何使用定位？

在css中最常用的定位方式有两种，分别是绝对定位和相对定位。这两者对于初学者来说是很不容易弄懂的。要真正理解绝对定位和相对定位，需要先知道一个知识点文档流。那么什么是文档流呢？

一.文档流

CSS的定位机制有3种：普通流、浮动（float：left/right/none）和定位。这里的普通流就是文档流，也就是说页面布局按照从左至右，一个挨一个的顺序排列的。

如果将元素的position属性设置为absolute即绝对定位。此时元素就会脱离文档流。同样如果给元素设置了浮动，也会脱离文档流。

了解了文档流之后，想必大家应该知道为什么使用定位了吧，那问题又来了，何时使用定位呢？

二.何时使用定位

一般设置样式不需要用到绝度定位和相对定位，当你想在网页 或一个div的上方漂浮着一个div ，让这个div挡住下面的div ，就想当于，绝对定位或相对定位的div 踩在 了整个网页的上面。而且你还可以设置这个div的移动位置，让这个div 任意处在这个网页中的任何位置。一般新手，网页布局的不对，导致div不按照自己的想法布局，就设置相对定位或绝对定位，导致其他的元素 也乱掉，最后全都要设置绝对定位了。所以在使用绝对定位和相对定位的时候一定要慎重。

 

1.相对定位：relative。相对于原来的位置移动，设置该属性值后该元素仍在文档流中，不影响其他元素的布局。

可以通过改变left，top，right，bottom等属性的值改变元素的位置。但不会影响其他元素的布局

运行结果：

现在对第2个div设置相对定位，对.div2的样式修改如下

 

此时运行结果如下：

 

对比可以看出，将div2设置为相对定位，它的left和top的值是相对于他自身的。而其他元素的位置不会受影响。

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

我们将例子中div2的定位方式改为绝对定位

 

运行结果：

 

由运行结果我们可以看出：

1.div2悬浮在页面上，偏移的位置就是设置的left和top的值。2.div2的原来占据的位置被div3占据了。导致div3的位置发生变化。

3.本例中没有设置div2的宽度，此时div2的宽度就是div2的内容。