文档流文档流是一种默认的定位方式。元素框在文档流中的位置由元素在html中的位置决定。元素在文档流中的position属性是默认的static或者继承过来的static，按照正常流来定位。块级元素占据一行，从上到下排列；内联元素从左到右排列。从文档流中获取元素的方法有3种：floatingfloat；绝对定位position:absolute;定位定义元素相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素或浏览器本身的偏移量。定位方式一共有三种：div{position:absolute/relative/fixed}1.position:fixed是相对于浏览器窗口定位的，被定位的元素在文档流之外。元素的位置由left、top、right和bottom属性指定。fixed始终根据浏览器窗口定位，无论其他元素如何设置，都不会影响它。2.position:relative相对于元素本身的正常位置进行定位，元素在文档流中仍然占据原来的空间，但是显示的位置会相对于原来的位置发生偏移。left:20将向元素的LEFT位置添加20个像素。3.position：absolute，相对于第一个有定位属性（fix/relative/absolute，一般为relative）的父元素的偏移量，如果找不到这样的父元素，向上看body，html元素。绝对定位的元素会脱离文档流。元素的位置由left、top、right和bottom属性指定。定位方法demoabsolute,relative,fixedOffset参考点1.绝对定位：浏览器会递归搜索该元素的所有父元素，如果找到position:relative/absolute/fixed设置的元素，则将此元素作为Datum定位，如果没有找到，会以浏览器边框定位。一般情况下，我们会把relative和absolute一起使用，方便我们定位absolute元素。2、相对定位：相对元素的定位总是相对于元素本身的位置，与其他元素无关，不会影响其他元素。3、固定定位：固定元素的定位总是相对于浏览器的边框，与其他元素无关。z-index定位属性设置top,right,bottom,left的元素，z-index有效。z-index（设置堆叠），可以通过z-index属性控制元素在Z轴方向的堆叠顺序。z-index越高，元素的位置就越高。如果是正数就代表离用户更近，如果是负数就代表离用户更远。没有定位属性的元素被设置为无效。如果两个元素具有相同的z-index值，则后一个元素将按文档流顺序浮动在前一个元素之上。z-indexdemoposition：relative和negativemargin的差值，用来抵消元素的位置，所以其他元素的位置不变。负边距：被负边距偏移的元素会让出偏移前占用的空间，这样它后面的文档流中的其他元素就会“流动”来填充这个空间，所以其他元素的位置发生了变化。相对和负保证金抵消之间的差异。demo中心将目标元素的父元素设置为绝对定位，并将四向偏移值设置为0。然后将目标元素设置为绝对定位，并在顶部和左侧方向设置偏移值为50%（这里的50%是相对于父元素而言的），使得元素左上角的原点位于页面的中心。然后使用负边距将元素的左上角向左向上移动其宽度和高度的一半，使元素在页面上垂直居中。演示浮动元素的功能。float最初的设计是为了实现文字环绕效果，即在图片上使用float后，周围的文字环绕。1.float使元素脱离文档流。当父元素没有设置固定高度时，元素会浮出文档流，父元素会收缩。2.元素设置为浮动或绝对定位后，如果元素没有设置宽度，元素有收缩，Elements会自动根据内容调整宽度。也就是说absolute和float都具有自适应宽度的特性。3、内联元素和块级元素浮动后会变成块级元素。使用绝对定位的元素也会成为块级元素4.浮动元素可以向左或向右移动，直到其外边缘接触到包含框或另一个浮动框的边框。由于浮动元素会脱离文档流，其他普通元素会忽略浮动元素，后面的元素会占据浮动元素的文档流空间。当一个元素浮动时，它只能向左或向右移动，而不能向上或向下移动。浮动元素先站在自己文档流的位置，然后左右浮动。紧跟在浮动元素后面的内联元素会粘住浮动元素（图片和文字环绕），文字会围绕浮动元素，这也是设计浮动元素的初衷。浮动demo清除浮动元素后，父元素无法支持高度（父元素未指定高度时），影响与父元素同级元素。与浮动元素处于同一层级的非浮动元素会紧随其后，不管浮动元素是否存在，并占据浮动元素原来的位置。如果第一个元素不浮动，则该元素之前的元素也需要浮动，否则会影响布局。演示1。给元素加上clear:left/right/both可以清除元素前面浮动元素的副作用。元素浮动后谁受影响，clear就加给谁。2.浮动元素包裹父元素（或直接设置父元素），设置宽度为100%，并设置overflow:hidden3.浮动元素包裹父元素（或直接设置父元素），设置伪元素阻塞后的父元素，然后设置伪元素元素clear:both；
