css的position属性

常见的布局方式：

（1）标准流（默认的、顺序布局）

（2）定位

（3）浮动

 

1. 标准流：

（1）块级元素：

    标签：div 、h1-h6、p、table、有序无序列表等。

    特点： 独占一行

（2）内联元素：

    标签： a   span  img  input  等

    特点：在网页上占同一行。空间不够才去下一行

 

 

2. position 定位属性（通过改变正常的标准流，迫使元素脱离标准流。决定物体如何定位)

    常见的参数有：static、relative、absolute、fixed、inherit

 

  （1）static：  默认值。没有定位。

        出现在正常流中元素忽略top，right等的声明

 

     （2）relative：相对定位相对于正常位置定位

                                     通过left  top  bottom right使元素脱离标准流

                     Eg：蓝色的position：relative   top：5px；

         则相对她的正常位置  也就是图一他本来应该在的位置  距离上方5px

                         

 

 

      （3）Absolote：绝对定位。

          相对于static以外元素的第一个父元素定位

 

          Eg：下图是蓝色 position为absolute。 Top：50px；

      可以看出蓝色距离网页顶端为50px。因为蓝色的css在红色之后，所以对红色区域进行了覆盖

                  

          （4）Fixed：固定定位。生成绝对定位元素。相对于浏览器窗口进行定位

 

          （5）Inherit：（据说ie任何版本都不支持~所以这个能不用就不用）

3.float浮动：

    float 属性定义元素在哪个方向浮动。虽然任何元素都可以浮动，但这个属性通常应用于图像，使文本围绕在图像周围，浮动元素会生成一个块级框，而不论它本身是何种元素。

取值： left  right  none  inherit