css基础--定位

　　在CSS中，元素的定位属性包括定位模式和边偏移两部分。

一、定位模式（4种）：

　　在css中， position属性用语定义元素的定位模式，其语法的格式为：

　   选择器 { position：属性值；}  

　　其中position属性的常用值分为以下四种：

• static : 自动（静态）定位（默认定位方式）。
• relative ：相对定位，相对于其原来位置的左上角为定位原点；不脱标，保留位置。
• absolute：绝对定位，当没有父级或者父级没有定位时，以浏览器当前窗口为准；如果父级有定位，则以父级的左上角为定位原点；不保留位置，完全脱标。
• fixed：固定定位，始终以浏览器窗口为准，不受父级的影响；不保留位置，完全脱标。

总结：

　　在写”盒子”的时候我们一般是这样使用：子绝父相。

　　这句话的意思是 子级是绝对定位的话， 父级要用相对定位。

　　首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

　　就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

二、边偏移

• top：　   顶端偏移量，定义元素相对于其父元素上边线的距离。
• bottom：底部偏移量，定义元素相对于其父元素下边线的距离。
• left：      左侧偏移量，定义元素相对于其父元素左边线的距离。
• right：    右侧偏移量，定义元素相对于其父元素右边线的距离

　　在今后的使用时，定位要和这边偏移搭配使用，比如：

1 1 position: relative;   /* 相对位移*/
2 2 top: 100px;  /* 相对父级元素顶线的距离 100px */
3 3 left: 100px; /* 相对父级元素左边线的距离 100px */

　　第一次写博客，以上内容仅为个人学习笔记，便于今后查看，仅仅提供参考作用。

css基础--定位

原文：https://www.cnblogs.com/hexuhua/p/10453778.html