CSS定位

前言:

在做web页面的时候少不了的就是定位

专业话语:

CSS 定位（Positioning）是控制网页元素位置和布局的重要机制。它允许你将元素放置在页面的特定位置，或者相对于其他元素进行定位

话不多说上例子:

 使用场景：

这里是个小弹窗 登录弹窗 可看到右上角的小X号 这里就可以使用绝对定位  position: absolute;

操作起来也很简单

这里我们举个简单的例子

展示： 很简单就实现了 

上面是简单展示一下定位 让大家先大概知道一下 下面展示定位的特点、种类 等等一些

*在了解定位之前呢先了解一下 "脱离文档流" 也成为：脱标

在 CSS 中，“脱离文档流”（也称为“脱标”）指的是元素不再按照正常的文档流进行布局，而是通过特定的定位方式被移出这个流程。这意味着该元素不再影响页面中其他元素的位置，也不会被其他按照正常文档流布局的元素所影响

当一个元素被设置为 position: absolute; 或 position: fixed; 时，它就脱离了文档流

绝对定位的元素相对于最近的已定位（非 static）祖先元素进行定位；如果没有这样的祖先，则相对于初始包含块（通常是浏览器窗口）

脱离文档流的影响：

不占位: 脱离文档流的元素不会在其原始位置留下空白，因此它后面的元素可能会移动到它的位置上

层叠上下文: 绝对定位和固定定位的元素会创建一个新的层叠上下文，这可能会影响到 z-index 的行为，以及元素在视觉上的堆叠顺序

布局计算: 脱离文档流的元素通常不会参与到父元素的高度或宽度计算中。例如，如果你有一个只包含绝对定位子元素的父元素，父元素的高度可能会是0，除非你显式地设置了高度

简单理解就是当你设置了

position: absolute / fixed 之后它就会脱离文档流 意思就是它的位置没了不再占据之前的空间了它的兄弟会挤上来占据位置

你可以理解为飞起来了

下面再举个例子:

这里是正常的文档流 

还没设置定位 还没飞起来

开始定位 开始 脱标 飞起来

可以看到哈 就一个盒子了？蓝色盒子没了？

控制台看到son2这个盒子还在只不过是在下面

这就是脱标 它的原来位置没了 就是脱标了 下面兄弟挤上来了 

并且补充一个 设置定位的元素 它的层级是比正常的元素(没有定位的元素)的层级高的所以蓝色盒子才会看不见了 --  应该理解了吧 下面 开始飞起来

一、定位 

1、相对定位：

      position: relative;

• 相对定位的元素相对于其正常位置进行偏移。
• 使用 top, bottom, left, right 可以调整元素的位置，但它的原始空间仍然会被保留。也可以% 也可以负数
• 不影响文档流中后续元素的位置

刚刚说了 设置 absolute 和 fixed 属性才会脱离文档里 这里的 relative 是相对定位它的特点就是不脱离文档流 你可以理解为 飞起来了 但是位置还在 。

2、绝对定位 :

   position: absolute;

• 绝对定位的元素脱离了文档流，不再占据空间。
• 元素的位置是相对于最近的已定位（非 static）祖先元素；如果没有这样的祖先，则相对于初始包含块（通常是浏览器窗口）。
• 使用 top, bottom, left, right 来指定元素相对于其包含块的位置 也可以% 也可以负数

 温馨提示：就是绝对定位啊 我们一般情况下都会搭配 相对定位   position: relative;使用 

   position: relative;不会脱离文档流 绝对定位脱离 我们平常可以根据父元素设置   position:       relative;相对定位   position: absolute; 是相对于父元素的position: relative;去定位的

 口诀： 父相子绝

3、固定定位:

 position: fixed;

• 固定定位的元素也是脱离文档流，不占据空间。
• 元素的位置是相对于浏览器窗口，即使页面滚动，元素也会保持在相同的位置。
• 使用 top, bottom, left, right 来设置元素与视口边缘的距离

它的使用场景一般用在一个元素固定在一个地方 比如:头部导航 和右侧导航栏等等一些

4、粘性定位 :

  position: static; 不是很常用了解即可

• 粘性定位是一种结合了相对定位和固定定位的行为。
• 元素在跨越特定阈值（例如用户滚动到某个位置）之前表现为相对定位，之后则表现为固定定位。
• 通常用于创建导航栏或其他需要在滚动到一定位置时“粘”在页面顶部或侧面的元素

最后补充一段

5、z-index 属性

刚刚我们看到了红色盒子son1设置定位以后飞起来了 虽然蓝色son2盒子占据它的位置但是它被覆盖了怎么办呢？

z-index 属性是 CSS 中用于控制元素在 Z 轴（即垂直于屏幕的轴）上的堆叠顺序的关键属性。它决定了当多个元素在同一个位置重叠时，哪个元素会显示在最上面

z-index 属性用于控制堆叠顺序，即当多个元素重叠时哪个元素显示在最上面。数值越大，元素越靠前。需要注意的是，z-index 只适用于定位元素（即 position 不为 static 的元素

可以看到蓝色盒子在上面了 我们把红色盒子的层级降低了  z-index:1;默认1

两个定位怎么办呢？

可以看到蓝色也设置了定位 并且在红色上面 就是谁最后设置的定位谁就在上面     如何变化呢？

只需要改变z-index 层级即可 默认是1

注意的是z-index 只对定位元素有效 

实践建议

• 尽量使用最少的定位属性来实现你的设计，因为过多的定位可能会使布局变得复杂且难以维护。
• 对于简单的布局，考虑使用浮动（float）或者弹性盒子（flexbox），对于更复杂的布局，可以使用网格（grid）。
• 在移动设备上，尽量避免使用固定定位，因为它可能会影响用户体验，尤其是在用户缩放页面时
• 希望这些信息能帮助你更好地理解和使用 CSS 定位

                                         如何前端小关的哪篇文章让你收益了就留言 + 关注吧 ？ 欢迎私信提意见