/*分享记录学习*/
编辑器： Sublime Text 3 浏览器：Firefox
HTML是承载网页的躯体，CSS为它提供了美丽的外表，JS为它注入了灵魂
float元素相信大家都不陌生，在脱标流中它为我们提供了标签的浮动，使得网页的显示更具特色
不过，float的实现也可以被其他元素替代的，可能做起来会有点傻，甚至存在代码冗余的情况
position，有四种可选属性值：
1.static: 默认值，没有定位
2.relative： 元素相对定位
3.absolute：元素绝对定位（html）
4.fixed：元素绝对定位（浏览器）
3和4有什么区别？absolute所生成的绝对定位元素是相对于static以外的第一个父元素进行定位
当我们给黑方块添加一个absolute：
我们可以发现，demo4所代表的黑方块直接脱离 套娃组织 ，去网页显示的最底边了，这就说明，demo4相对于我们的body标签做了绝对定位>>>bottom(底部)为0，即贴近body标签的底边
然后将demo4的position由absolute改为fixed显示也是如此 (浏览器图片和代码修改图片就不放了)，这样子看上去好像两个属性值实现的都是一模一样的，可是现在让我们给demo1所代表的红方块给它relative的属性值，并把demo4的position更改回absolute
可以发现，这时候的demo4黑方块不再是贴近网页显示的底边了，而是贴近了demo1红方块的底边>>>demo4相对于demo1做了绝对定位，同理，当我们将demo1的position替换给demo2时：
demo4位置再次发生改变，这一次它贴近了demo2所代表的蓝方块的底边
那将demo4的position属性值改回fixed后：
我们发现，fixed属性值的demo4依旧贴近于网页显示的底边，没有去理会demo2上设置的relative，难道是针对demo2这个蓝方块？那我们换demo3再试
它依旧如此……你大可这样子理解：absolute，会根据其他父元素所设置relative变更自己的绝对定位显示，而fixed不会，或者说，它至始至终都是相对于body标签做绝对定位，是真正的痴情人！
不过我们要讲述的主题并不是这个……relative的作用可不单单是给absolute拿来做定位的，它自己本身也可以实现
我们可以发现，demo4的绝对定位依旧是相对于demo3的，而且demo3也距离左边有了100px的空间，可是单纯如此我们无法判断出demo3是相对于哪个元素做的定位，有可能是demo2，demo1，body标签……这是我前期编写代码所没有考虑到的，那这个就交付给你们自己去验证了，大体上是让四个方块之间有分离，从一开始四个方块左上角的贴合，变成“回”字形状，添加margin属性再设置距离就行，此处暂且不提
最后，照应标题，relative如何和absolute配合，我相信你们都应该理解我所表达的，给父级元素添加relative，然后在子级元素使用absolute，子级元素就会直接相对于此父级元素做绝对定位>>>毕竟html内容，有些时候还真的必须要有“套娃”的代码
那我们可以使用这个配合做什么好呢？float，浮动元素，可以是元素居右对齐或居左对齐，达到同级div同行显示的效果……而我们只要给这些同级div套在同一个父级div下面，就可以给父级div一个relative属性值，它所属下的同级div我们都可以让它们相对于这个父级做绝对定位……
这可真是一个没办法中的办法，傻瓜式操作，今天，你学会了吗？
