定位相关知识

1. 浮动可以让多个块级元素一行没有缝隙排列显示，经常用于横向排列盒子。

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。

3. 定位组成：将盒子定在某一个位置，定位就是在摆盒子，按照定位方式移动盒子。

4. 定位=定位模式（指定一个元素在文档中的定位方式）+边偏移（决定该元素的最终位置）

5. 定位模式：position属性

其值：

（1）static：静态定位

（2）relative：相对

（3）absolute：绝对

（4）fixed：固定

6. 边偏移（相对于其父元素的距离）：有四个属性：top（不是向上的意思，是相对父元素上边线的距离，也就是下移，其他同理）、bottom、left、right

7. 静态定位（了解）（默认定位方式，无定位的意思）

（1）语法：选择器 {position: static;}

（2）按标准流特性摆放位置，无边偏移

8. 相对定位（重要）

（1）移动位置时相对于它原来的位置来说的。

（2）语法：选择器 {position: relative;}

（3）原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，继续保留原来的位置）。

9. 绝对定位（重要）

（1）移动位置时相对于它祖先元素来说的。

（2）语法：选择器 {position: absolute;}

（3）如果无祖先元素或祖先元素无定位，则以浏览器为准（Document文档）。

（4）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。

（5）绝对定位不再占有原来的位置（脱标）

10. 子绝父相：子级绝对定位不占位置，父级需加定位限制子级在父级内显示，父级需要占有位置，只能用相对定位。

11. 固定定位（重要）

（1）语法： 选择器{ position: fixed; }

（2）以浏览器的可视窗口为参照点移动元素。

（3）跟父元素无关系，不随滚动条滚动。

（4）不占有原来的位置。

12. 固定定位技巧：固定在版心右侧位置。

做法：让固定定位的盒子left：50%走到浏览器可视区的一半位置。然后让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置。就可以实现固定定位的盒子贴着版心右侧对齐。

13. 粘性定位：相对定位和固定定位的混合。（了解）

（1）语法：选择器 { position: sticky; top: 10px; }

（2）以浏览器可视窗口为参照点

（3）占有原先的位置

（4）必须添加top、left、right、bottom其中一个才有效

14. 定位叠放次序z-index

（1）可能出现盒子重叠情况，z-index控制盒子前后次序

（2）语法：选择器 { z-index: 1;}

（数值可以是正整数、负整数或0，默认auto，数值越大，盒子越靠上。如果属性相同，按照书写顺序，后来居上，无单位）

（3）只有定位盒子才有z-index属性

15. 绝对定水平垂直居中

注意：加了绝对定位的盒子不能通过margin:0 auto水平居中

方法：left:50%;：让盒子的左侧移动到父级元素的水平中心位置。margin-left:-100px;：让盒子向左移动自身宽度的一半。

16. 定位特殊特性

（1）行内元素添加绝对或固定定位，可以直接设置高度和宽度

（2）块级元素添加绝对或固定定位，如果不给高度或宽度，默认大小是内容大小。

17. 脱标盒子不会触发外边距塌陷（浮动元素、绝对定位、固定定位）

18. 绝对定位（固定定位）会完全压住盒子，而浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片），绝对定位会压住下面标准流所有的内容。