CSS 布局一般是后写的带有定位属性的元素层级 大于 先写的（或者没有设置的）定位属性层级，后者会覆盖在前者上层。
目录
position属性
position:relative
position:absolute
position:fixed
float属性
position属性
position属性指定一个元素（默认静态的，可以有相对，绝对或固定）的定位方法的类型。 默认值static：没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
position:relative
生成相对定位的元素，相对于其正常位置（就是元素自己本来的位置）进行定位。在文档流中仍然占有空间，其参考对象是离该元素最近的父元素。因此，样式
position:relative;
left:20px;
向元素的原始左侧位置增加 20像素（元素发生的右移20像素）。
position:relative;
left:-20px;
从元素的原始左侧位置减去 20 像素（元素发生的左移20像素）。
同理元素的top, bottom, right位置属性一样存在这样的原理。
假设元素是在左上角（0，0）位置，（此处位置坐标只是举例说明，不代表真实坐标）
设置left:20px;此时向右为x轴正方向，元素相对原点（0，0）向右移动20像素；
设置right:20px;此时向左为x轴正方向，元素相对原点（0，0）向左移动20像素，此时元素是不显示在屏幕上，位置是屏幕外的；
设置top:20px;此时向下为y轴正方向，元素相对原点（0，0）向下移动20像素；
设置bottom:20px;此时向上为y轴正方向，元素相对原点（0，0）向上移动20像素，此时元素是不显示在屏幕上，位置是屏幕外的；
position:absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，脱离文档流。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。如果设置了position:absolute，而不设置"left", "top", "right"，"bottom"属性， 也是没有脱离文档流的。元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。
注意：absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。
绝对定位是相对窗口的四个顶点为原点的，在<body>下的<div>设置以下属性
position:absolute;
left:100px;
top:150px;
相对左上角，距离窗口左边100 px和距离窗口顶部150 px。
position:absolute;
right:100px;
bottom:150px;
相对右下角，距离窗口右边100 px和距离窗口底部150 px。 想相对父元素设置相对定位，父元素也必须设置定位属性。
position:fixed
生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置相对于浏览器窗口是固定位置，脱离文档流。即使窗口是滚动的它也不会移动。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
固定定位也是相对窗口的四个顶点为原点的，与绝对定位一样，
在<body>下的<div>设置以下属性
position:absolute;
right:100px;
top:150px;
相对右上角，距离窗口右边100 px和距离窗口顶部150 px。
position:absolute;
left:100px;
bottom:150px;
相对左下角，距离窗口左边100 px和距离窗口底部150 px。
但是不受限与父元素，父元素是否设置定位属性都不影响固定定位的元素位置
float属性
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。重要的是任何被声明float的元素都会自动被设置成块元素
- 脱离文档流，但不脱离文本流。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 对兄弟元素的影响
上面贴非float元素（一般float元素上面贴的都是非float元素）
旁边贴float元素（靠左，或者靠右的时候贴float元素）
不影响其它块级元素位置
影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流） - 对父级元素的影响
从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是overflow,直接给父标签设置一个overflow:hidden;具有清除内部浮动的作用；） - float主要用于布局，标签在float之后为了不影响下面内容的布局，一定要记得清浮动；清除浮动
clear:both;
