要理解div布局，
首先要理解CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对 象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该 元素是块元素或者内联元素。其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
float属性：float : none | left |right
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)。也就是说，浮动对象display特性将被忽略。
到此基本明白了float的含义了，一个简单例子
.leftfloat{
width:200px;
height:100px;
float:left;
}
<div class="leftfloat"> </div>
此样式表明该块将向做边块靠齐，如果有三个div都引用此样式则这三个div则横向并排排列。
下面来看position
有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：
1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。
2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。
(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。
relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。
当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上,而该元素原来所占的位置将被充填。
那如果我放置两个绝对定位的元素，谁会被遮挡住呢？这里需要介绍一个叫做z-index的属性，将这个属性设置的值越大，那个元素就会出现的上面。
ok，至此这两个属性基本明白，收集个实例^_^
来源：https://www.cnblogs.com/oldkingsir/archive/2009/01/05/2365642.html