不知不觉前端的CSS基础也快接近尾声了，之后我们会进入JavaScript的讲解。新来的童靴们可以翻看以前的文章，小编在更新新知识的同时，也会对讲过的知识进行补充。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

CSS定位

position 属性允许你对元素进行定位。

• static：静态定位，top，right，bottom，left等属性不会被应用。

• relative：相对定位，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

• absolute：绝对定位，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

• fixed：固定定位，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

静态定位

static，静态定位，也可以说没有给元素定位，设置此属性值的元素不会脱离文档流。

相对定位

relative，相对定位，相对于其正常位置进行定位，设置此属性值的元素不会脱离文档流。

例如：两个div元素

我们给它加一点样式，box1边框为蓝色，box2边框线为红色，

浏览器中显示：

我们给box2添加相对定位，并且相对于位置水平和垂直各偏移20px:

浏览器中效果

我们可以清楚地看到，相对定位是根据它原本在文档流中的位置定位的。

绝对定位

absoulte，绝对定位，根据祖先类元素进行定位，脱离文档流。祖先类元素必须是postion非static方式定位的。

可能童靴们有些不理解，下面举个开发中常见的例子给大家说明一下:

我们设置一些样式，

在浏览器中显示

content_inner是content里面的子元素。我们给content_inner设置绝对定位，content设置相对定位，

在浏览器中显示

content设置relative之后相当于参照物，其下的子元素设置absolute之后依照参照物进行位移。

固定定位

fixed，固定定位，相对于可是屏幕定位，元素脱离文档流。

如下：

<div class="box"></div>

给box元素添加样式，设置固定定位：

我们在浏览器中查看，为了查看效果我们添加了一些文字：

童靴们理解了没有，看着文章自己试一试才会理解的透彻。

爱学习的孩子运气不会差哦！

关注小白前端，持续收到文章推送。

[css][css][css][css][css][css][css][css][css][css][css][css][html][html][html][html][html][html][html][html][html][html][html][html][html]