HTML CSS 定位 position

定位

方位：

left  right  top  bottom

position 属性

属性值：

static	静态定位（默认）
absolute	绝对定位（脱标）
relative	相对行为
fixed	固定定位

1.静态定位

用法：

   position： static

 

 静态定位就是元素标准流的显示方式。

2.绝对定位

用法：

  position：absolute;

 元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。

 

特点：

    a.当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

    b.当盒子发生嵌套关系的时候，如果父盒子（多层嵌套时，子盒子的各级父元素都没有设置定位）没有设置定位，子盒子设置定位以浏览器左上角（body）为基准设置定位。

    c.当盒子发生嵌套关系的时候，如果父盒子设置定位(position: relative | absolute;)，子盒子设置定位以父盒子左上角为基准设置定位。

       当有多层嵌套时，以最近一级设置了定位的父元素为基准

    d.给盒子设置了绝对定位，该盒子不占位置（脱离标准文档流，产生同样效果还有float属性）

    e.给行内元素设置绝对定位后，该元素转化为了行内块元素

      (将行内元素设置为行内块元素一共有三种方式：display: inline-block; | float: left | position: absolute;)

3.相对定位

用法：

position: relative

元素设置了相对定位后，通过具体的方位名称可以随便设置元素的位置。

特点：

    a.元素设置了相对定位后占原来的位置(没有脱离标准文档流)

    b.设置相对定位以自己的位置为参照设置位置

    c.相对定位不能进行元素的模式转换(行内元素、块元素、行内块元素之间的转换)

4.固定定位

用法：

position：fixed；

元素设置了相对定位后，通过具体的方位名称可以设置元素相对于浏览器窗口(body)的位置，不受滚动等操作的影响。

特点：

     a.固定定位不占位置（脱离文档标准流）

     b.将行内元素转化为行内块元素

        脱离标准文档流 —>将行内元素转换成行内块元素