CSS 定位

一、为什么需要定位

在很多情况下，仅仅使用标准流或者是浮动很难实现我们想要的某种效果，就比如：
① 某个元素可以自由地在一个盒子内移动，并且可以压住其它盒子；
② 当我们滚动窗口的时候，盒子要求被固定在屏幕上的某个位置。

以上效果用标准流和定位是无法实现的，此时需要定位来实现。

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让一个盒子在另一个盒子内自由地移动位置，或者是固定在屏幕中的某个位置，并且可以压住其它盒子。

二、定位的组成

定位：将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了元素的最终位置。

1.定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 来设置，属性值有以下四种：

2.边偏移

边偏移就是将定位的盒子移动到最终位置，有以下四个属性：

三、定位

1.静态定位

静态定位是元素的默认定位方式，也就是无定位。

position: static;

静态定位按照标准流特性摆放位置，它没有边偏移，静态定位在实际布局时很少会用到，所以了解即可！

2.相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

position: relative;

相对定位的特点：
① 它是相对自己原来的位置来移动的；
② 原来的位置仍然是被占有的，所以后面的盒子不会脱标，也还在原来的位置；
③ 很重要，常用！

3.绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

position: absolute;

绝对定位的特点：
① 如果没有祖先元素，或者祖先元素没有定位，则以浏览器为准去定位；
② 如果祖先元素有定位，则以最近一级的有定位祖先元素作为参考，移动位置（如果父亲无定位爷爷有定位，则盒子会以爷爷为基准移动位置）；
③ 与相对定位不同的是，绝对定位后的盒子不再保留之前位置，所以后面的标准流自然会脱标占有上面的空位置（绝对定位是飘起来的）；
④ 很重要，常用！

3.1 绝对定位盒子居中

加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%，让盒子的左侧移动到父级元素的水平中心位置；
② margin-left: -100px，让盒子再向左移动自身宽度的一半；
③

4.固定定位

固定定位是将元素固定于浏览器可视区的某个位置，主要使用场景：在浏览器页面滚动时，某元素可以固定在当前位置保持不变，也就是说它并不会随着页面的滚动而跟着滚动。

position: fixed;

固定定位的特点：
① 边偏移以浏览器的可视区为基准来固定元素（窗口可以放大缩小）；
② 固定定位不占有原先的位置；
③ 很重要！

4.1 固定到版心右侧

我们想让固定的盒子紧贴着版心的右侧，有以下几个步骤可以实现：

① 让固定定位的盒子 left: 50%，走到浏览器可视区一半的位置；
② 让固定定位的盒子 margin-left: 再走版心宽度的一半。（中间如果想要留有一定的空隙，那我们可以走版心宽度的一半再多一点就可以了！）

5.粘性定位

粘性定位就是元素会随着浏览器页面的滚动跟着一起滚动，但是当它滚动到某个高度的时候将会被固定在该位置，不再跟着页面滚动。

position: sticky;
top: 10px;

粘性定位的特点：
① 以浏览器的可视窗口为参考点移动元素；
② 粘性定位占有原先的位置；
③ 必须添加 top、bottom、left、right 其中一个才有用；
④ 兼容性太差，一般不会使用，了解即可！

四、子绝父相

相对定位和绝对定位是我们实际开发中最常用到的两种定位方式，那什么时候我们该使用相对定位，什么时候又会用到绝对定位你知道吗？下面我要说的就是相对定位和绝对定位它们各自的使用场景！

子绝父相是我们学习定位过程中一个尤为重要的口诀，它的意思是子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面任何一个地方，且不会影响其它的兄弟盒子；
② 父盒子需要加定位限制子盒子在父盒子内显示；
③ 父盒子布局时需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，所以是绝对定位，相对定位经常用来约束绝对定位！

五、定位的叠放顺序

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用 z-index 来控制盒子的先后次序。

z-index: 2;

① 数值可以是正整数、负整数或0，默认是 auto，数值越大，盒子越靠上；
② 如果属性值相同，则按照书写顺序，后来者居上；
③ 只有定位的盒子才会有 z-index 属性；
④ 数字后面不能加单位。

六、定位的拓展

① 行内元素添加绝对或者固定定位，就可以直接设置宽度和高度；
② 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小则是内容的大小；
③ 脱标的盒子不会触发外边距塌陷的问题（浮动元素、绝对定位元素）；
④ 浮动元素会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字或图片，但是绝对定位或者是固定定位则会压住它下面标准流中所有的内容（浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的）。