CSS定位

参考书籍：

    《编写高质量代码：web前端修炼之道》第四章

    《精通CSS：web高级标准解决方案》第三章

写在前面的话：

    1、css中的三种基本定位机制：

            a、普通流：元素框的位置由其在HTML中的位置确定。

            b、浮动。

            c、绝对定位。

    2、行内框在一行中水平排列，可以使用水平内边距、边框及外边距来设置他们的水平间距，但是，垂直内边距、边框及外边距不影响行内框的高度，同样，对行内框显示设置的高度或宽度也不会生效。

        由这一行所形成的框称为行框。行框的高度总是足以容纳它所包含的所有行内框（及由高度最高的行内框确定）。但是却可以设置该行框的行高line-height。所以修改行内框尺寸的方式：修改行高或者内边距、边框、外边距。

行框及行内框

         3、没有显示定义也会创建块级元素或者行框的情况：

                a、将一些文本添加到块级元素的开头（例如div），这些文本会形成匿名块框。

    sometextpppp

   

hello

                b、对于块级元素的文本行，每行都会形成一个匿名行框，无法对匿名行框应用样式。

定位

写在前面的话：

        1、对于正常的文档流还有这样的一种表述方式：文档看起来是二维结构，但其实它是具有z轴的，并且由z-index来表示。默认情况下，元素都是处于z-index = 0 这一层。position：absolute/relative会激活元素的top，left，bottom，right和z-index属性（默认情况下这些属性是未激活的，设置了也不会生效）。

        2、设置了position：absolute/relative的元素会发生浮动，脱离z-index=0这一层，而float设置了浮动元素，但其仍处于z-index=0这一层，这也就是为什么浮动元素会影响到普通流中元素的布局。

        3、摘自MDNposition的原文

            If both top and bottom are specified (technically, not auto), top wins.

            If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.)         and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.).

（一）、相对定位：relative

        使用相对定位，元素仍占用他在普通文档流中的空间，然后相对与它在普通流中的位置进行定位。所以，移动该元素会覆盖其他的元素。

relative

（二）、绝对定位：absolute

            1、绝对定位元素脱离了普通流，在普通流中不占据空间，普通流中的元素可视为该元素不存在。

            2、绝对定位元素相对于最近已定位（absolute/relative）父元素进行定位，如果不存在这样的元素，则该元素相对于画布或者HTML进行定位。

            3、因为它不占据普通流中的位置，所以它可能会覆盖其他元素，可以通过设置z-index来设置堆叠次序。

absolute

（三）、固定定位：fixed

    它是绝对定位的一种，不同的是它是相对于浏览器的视口进行定位。

（四）、浮动定位：float

            1、浮动的框可以左右移动，直到他的外边缘碰到包含框或者另一个浮动框。

            2、浮动元素会覆盖普通流中的元素。

            3、

向左浮动

            4、

 浮动的清理：

                    a、增加清除浮动元素；

                    b、触发包含元素的BFC；

                    c、给包含元素增加伪类：

                

（五）、static：默认的普通流的顺序