244节---------4月25日

固定定位

元素固定于浏览器可视区的位置，主要应用场景：可以在浏览器页面滚动时元素的位置不会改变

语法：fixed

选择器{position：fixed；}

特点：

• 以浏览器的可视窗口为参照点移动元素
• 跟父元素没有关系
• 不随着滚动条而滚动
• 固定定位不在占有原先的位置

小技巧：固定在版心右侧位置

让固定定位的盒子left:50%，走到浏览器可视区的一般位置，再让盒子加上margin-left:版心宽度的一半距离，多走版心宽度的一半距离。

---

粘性定位

可以被认为是相对定位和固定定位的混合。

语法：sticky

选择器{position：sticky; top：10px;}

特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top、left、right、bottom其中一个才有效

---

定位的叠放次序

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

语法：

选择器{z-index：数值；}

• 数值是所有整数（包括+-0），默认是auto，数值越大，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上
• 数字后面不加单位
• 只有定位的盒子才有z-index属性

---

定位的拓展

绝对定位盒子居中

• 加了绝对定位的盒子不能通过margin:0 auto说平局中，但是可以通过以下算法实现水平和垂直居中。
• left：50%；让盒子的左侧移动到父级元素的水平重心位置，然后再margin-left：-100px；让盒子向左移动自身宽度的一半

---

定位特殊特性

• 绝对定位和固定定位也和浮动类似
• 脱标的定位不会触发外边距塌陷：浮动元素，绝对定位（固定定位）元素的都不会触发外边距合并的问题

---

绝对定位（固定定位会完全压住盒子）

• 浮动元素不动，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
• 但是绝对定位（固定定位）会压住下面标准流所有的内容。
• 浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。

---

定位总结