CSS：定位

CSS定位核心知识点详解

CSS定位是网页布局中的重要概念，它允许开发者将元素放置在页面的指定位置。以下是对CSS定位所有相关详细重要知识点的归纳：

为什么要使用定位：

1. 小黄色块在图片上移动，吸引用户的眼球。
   

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的
   
   定位：将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
   所以，我们脑海应该有三种布局机制的上下顺序。
   标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

一、定位的基本组成

定位由两部分组成：定位模式和边偏移。定位模式用于指定一个元素在文档中的定位方式，而边偏移则决定了该元素的最终位置。

注意：边偏移需要和定位模式联合使用，单独使用无效；

二、定位模式

定位模式通过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:

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

代码演示：

3.定位叠放次序（z-index）：

在使用定位进行布局时，可能会出现盒子重叠的情况。
可以使用z-index属性来控制盒子的叠放次序（从z轴方向来看）。

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。
   注意： z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无
   效。

只有定位的盒子才有z-index属性。

4.定位的特殊性：

浮动元素和绝对定位（固定定位）元素都不会触发外边距合并的问题。
绝对定位（固定定位）会完全压住盒子，而浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片）。

5.定位改变display属性

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。
同时注意：
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了

五、注意事项

在使用定位时，要注意元素的包含块是谁，以及元素是如何相对于其包含块进行定位的。
绝对定位和固定定位的元素会脱离标准流，因此不会占用原先的位置。这可能会影响页面的布局和其他元素的排列。
粘性定位在某些浏览器中的兼容性可能不佳，因此在使用时需要谨慎测试。
在使用z-index属性时，要确保只有定位的盒子才具有该属性，并且要注意数值的大小关系，以避免出现意外的叠放次序问题。

综上所述，CSS定位是一个强大且灵活的工具，可以帮助开发者实现各种复杂的布局效果。然而，在使用时也需要注意其特殊性和兼容性等问题，以确保页面的稳定性和可用性。

六、网页布局总结

一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。

1). 标准流

可以让盒子上下排列 或者 左右排列的。

2). 浮动

可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列 。

3). 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数
值