网页的样式一般是通过css（层叠样式表）来调整，通过对css的编写，可以让网页看起来更好看。那么，要想让网页的布局看起来更好看，需要怎么来编写你的网页样式呢？
首先，引入一个概念：普通文档流和bfc块级格式化上下文。普通文档流，通俗一点说，就是让html中的元素至上而下按顺序排列，而块级格式化上下文就是让html元素脱离普通文档流，把他们放入各自的容器当中，在布局上互不干预。
现在在网上能够看到的网页当中，没有哪个页面不是通过BFC来制作的。
那么，回归主题，一群元素在自己独立的空间里，是如何来布局的？
那么，position就横空出世了，虽然float也能对元素进行布局，但绝对没有position那么自有，灵活。
css中position属性规定了几种元素的定位方式，它的默认值为static，也就是存在于普通文档流中。
关于position的定位机制我们来举个例子：比如，在body中有一个div元素，div中有一个p元素，那么，如果我们给div设置position的话，它就相对于document的坐上顶点来定位的，为什么呢？因为absolute的定位机制是相对于拥有positionn属性的父级元素（static除外）来定位的，如果父级没有就往更上一层寻找，直到最高层。那么div的父级就是body了，而body也是html元素，既然它没有position属性，那么div就要向更高一层的父级元素寻找，body的更高一层就是html元素了，也就是元素的最高一层，所以，position只有整个document来定位了，也就是网页页面的左顶点位置。
那么，如果我们现在要给p元素定位，它往上一层就是div元素，而我们已经诶div元素设置了定位，所以p元素就相对于div元素的左定点来定位的。
position三个常用值，最常出现的便是absolue（绝对定位），fixed也是绝对定位，但它是直接相对于document左顶点来固定定位的，还有相对定位relative。
absolue：相对于父级的左顶点设置left值和top值来定位。
relative：相对于自己的原文档流中的位置来设置left值和top值来定位。