CSS：定位
CSS定位核心知识点详解
CSS定位是网页布局中的重要概念，它允许开发者将元素放置在页面的指定位置。以下是对CSS定位所有相关详细重要知识点的归纳：
为什么要使用定位：
-
小黄色块在图片上移动，吸引用户的眼球。
-
当我们滚动窗口的时候，盒子是固定屏幕某个位置的
定位：将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
所以，我们脑海应该有三种布局机制的上下顺序。
标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）
一、定位的基本组成
定位由两部分组成：定位模式和边偏移。定位模式用于指定一个元素在文档中的定位方式，而边偏移则决定了该元素的最终位置。
注意：边偏移需要和定位模式联合使用，单独使用无效；
二、定位模式
定位模式通过CSS的position属性来设置
选择器 { position: 属性值; }
其值可以分为以下几种：
| 值 | 语义 |
|---|---|
| 静态定位（static） | 元素的默认定位方式。按照标准流特性摆放位置，没有边偏移。 |
| 相对定位（relative） | 元素在移动位置时，是相对于它自己原来的位置来说的。原来的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标）。使用left、right、top、bottom四个属性来调整位置。 |
| 绝对定位（absolute） | 元素在移动位置时，是相对于它祖先元素来说的。如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document文档）。 |
| 固定定位（fixed） | 元素相对于浏览器可视窗口（浏览器的内容页面窗口）的位置来说的。固定定的元素不会随着滚动条的滚动而滚动。固定定位后，该元素不会占用原先的位置，脱离标准流。 |
| 粘性定位（sticky） | 可以被认为是相对定位和固定定位的混合。粘性定位以浏览器的可视窗口为参照点移动元素。粘性定位的元素会占有原先的位置。使用粘性定位时必须添加top、left、right、bottom其中一个属性，粘性定位才会生效。粘性定位的兼容性可能因浏览器而异。 |
1.相对定位的特点：（务必记住）
- 相对于 自己原来在标准流中位置来移动的
- 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
2.绝对定位的特点：（务必记住）
- 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
- 不保留原来的位置，完全是脱标的。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
三、边偏移
边偏移用于调整定位元素的最终位置，包括top、bottom、left和right四个属性。这些属性决定了元素相对于其包含块（对于绝对定位和固定定位）或自身原始位置（对于相对定位）的偏移量。
| 边偏移属性 | 实例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离。 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离。 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移
四、定位的特殊性和应用
定位口诀——子绝父相：
1.如果子级使用绝对定位，则父级需要相对定位。
这是因为绝对定位的盒子是相对于其包含块定位的，而包含块通常是第一个拥有定位属性的祖先元素。
2.定位元素的宽充满包含块：
可以通过设置width: 100%;等属性来实现。
定位元素在包含块中居中：
可以通过设置left: 50%;和margin-left: -自身宽度的一半;（对于绝对定位元素）或transform: translateX(-50%);（对于相对或固定定位元素）来实现水平居中。
垂直居中可以通过设置top: 50%;和margin-top: -自身高度的一半;或transform: translateY(-50%);来实现。
eg:
- left: 50%; ：让盒子的左侧移动到父级元素的水平中心位置；
- margin-left: -100px; ：让盒子向左移动自身宽度的一半。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style>
.one {
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
}
.two {
position: absolute;
top: 0;
/* 先右移 父级容器的50% */
left: 50%;
/* 再左移自身宽度的一半 */
margin-left: -100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
3.定位叠放次序（z-index）：
在使用定位进行布局时，可能会出现盒子重叠的情况。
可以使用z-index属性来控制盒子的叠放次序（从z轴方向来看）。
z-index 的特性如下：
- 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
- 如果属性值相同，则按照书写顺序，后来居上；
- 数字后面不能加单位。
注意： z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无
效。
只有定位的盒子才有z-index属性。
4.定位的特殊性：
浮动元素和绝对定位（固定定位）元素都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子，而浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片）。
5.定位改变display属性
前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:
- 可以用inline-block 转换为行内块
- 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
- 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。
所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了
五、注意事项
在使用定位时，要注意元素的包含块是谁，以及元素是如何相对于其包含块进行定位的。
绝对定位和固定定位的元素会脱离标准流，因此不会占用原先的位置。这可能会影响页面的布局和其他元素的排列。
粘性定位在某些浏览器中的兼容性可能不佳，因此在使用时需要谨慎测试。
在使用z-index属性时，要确保只有定位的盒子才具有该属性，并且要注意数值的大小关系，以避免出现意外的叠放次序问题。
综上所述，CSS定位是一个强大且灵活的工具，可以帮助开发者实现各种复杂的布局效果。然而，在使用时也需要注意其特殊性和兼容性等问题，以确保页面的稳定性和可用性。
六、网页布局总结
一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
1). 标准流
可以让盒子上下排列 或者 左右排列的。
2). 浮动
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列 。
3). 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数
值