前面学习过CSS 的FlexBox布局，很大一部分页面基本都能实现了。不过昨天在练习封装一个Banner组件（虽然小程序提供了swiper）的时候，发现FlexBox无法满足需求，了解了一下可以用position来解决。效果如下：
对于一般块级元素，拿div来讲，在页面中独占一行，自上而下排列，也就是传说中的流。而即使是flex布局，也只是在横轴或纵轴上流式布局，而上图中一个div在另一个div上是没有办法满足的。
对于 Position ，其有四个属性值：
CSS有三种基本的定位机制：普通流，浮动和决定定位
多个浮动存在时，会按照流的方式规则排列
行框和清理：
前面说浮动元素会脱离文档流，不会影响不浮动的元素。不过如果浮动的元素后面有一个文档流中元素，那么这个元素的框会表现的像浮动元素不存在，但是框的文本内容会受到浮动元素的影响，会移动以留出空间。
使用clear属性，可以组织行框围绕在浮动元素外边，属性的left、right、both、none表示框的哪些边不挨着浮动框。
"." 代表当前所在目录， 相对路径 。如:<a href="./abc">文本</a>或<img src="./abc" />；
".." 代表上一层目录， 相对路径 。如:<a href="../abc">文本</a>或<img src="../abc"/>；
"../../" 代表的是上一层目录的上一层目录，相对路径。 如:<img src="../../abc" />；
"/" 代表根目录, 绝对路径 。 如：<a href="/abc">文本</a>或<img src="/abc"/>；
"D:/abc/" 代表根目录, 绝对路径 。
在使用相对路径时，我们用符号“.”来表示 当前目录 ；用符号“..”来表示 当前目录 的父目录。
css中的绝对定位，意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。
css中的相对定位，意思是是相对于上一个相对定位的，总是相对于前面的同级标签为基准标签。
不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位，设置后，原来的位置始终保留着。绝对定位，设置后，原来的位置会被后面的内容占据。
