第六天-css基础（css定位)

css定位

 

方位名称：

 left  right  top  bottom

 

position:absolute 绝对定位（脱离标准流

div{
 100px; height:100px; bacround-color:black;
position:absolute;
left:0
}

特点：1、当给一个单独的元素设置绝对定位，以浏览器左上角为基准设置定位的

    2、当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位,定位的盒子会已浏览器左上角为基准设置定位。

    3、当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位，已父盒子左上角为基准设置定位。

    4、给盒子设置绝对定位，该盒子不占位置

    5、给行内元素设置绝对定位后，改元素转化为了行内块元素

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

 

position:relative 相对定位

 

特点:1、使用相对定位，位置从自身出发。

   2、还占据原来的外置

   3、子绝父相（父元素相对定位，子元素绝对定位）

   4、行内元素使用相对定位不能转行内块

 

position:fixed 固定定位

 

特点：1、固定定位不占位置

         2、将行内元素转化为行内块元素