当前位置：首页 > news >正文

CSS：定位

news 来源：原创 2025/6/10 13:06:20

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). 定位

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