position 是 CSS 属性，用于定义元素的定位方式。它决定了元素如何放置在页面上，并与其他元素的关系。常见的值包括 static、relative、absolute、fixed 和 sticky，每种值有不同的定位和文档流行为
1 position:static
在CSS中，position: static 是默认的定位方式。它使元素按照正常的文档流进行布局，不受 top、right、bottom 和 left 属性的影响。也就是说，使用 static 定位的元素在页面上保持其默认位置，不会进行任何偏移。
主要特点
- 文档流：使用 static 定位的元素按照页面的正常文档流排列，即元素会按照 HTML
中的顺序显示，并且元素的布局和位置不会因其他元素的定位而变化。 - 属性影响：static 定位的元素不会响应 top、right、bottom 和 left 属性。这些属性在 static定位下不起作用。
- 层叠顺序：元素的 z-index 属性在 static 定位下也不起作用，层叠顺序将遵循文档中的顺序。
.static {
position: static;
background: lightblue;
padding: 10px;
}
2 相对定位 relative
主要特点
- 元素偏移
基本概念：当你为一个元素设置 position: relative 时，它仍然占据原来的位置，但可以通过 top、right、bottom 和 left 属性进行偏移。
例子：top: 10px 会使元素相对于其原始位置向下移动 10 像素，left: 20px 会使元素向右移动 20 像素。 - 文档流
保持位置：即使元素使用了 relative 定位，它在文档流中的位置不会改变。其他元素不会因为这个元素的偏移而重新排列或调整位置。
影响：虽然元素的视觉位置发生了变化，但它在文档流中的占据空间不变，这意味着页面布局不会因这个元素的移动而被影响。 - 定位参考
子元素定位：一个 relative 定位的元素可以作为子元素使用 position: absolute 的参考点。子元素的 top、right、bottom 和 left 属性将相对于其最近的 position: relative 的祖先元素进行计算。
例子：如果一个 div 元素设置了 position: relative，它内部的 position: absolute 元素的定位将相对于这个 div 元素，而不是页面的边缘。 - 层叠和 z-index
层叠顺序：position: relative 元素可以与 z-index 属性一起使用，以控制元素的层叠顺序。通过设置 z-index，你可以让 relative 定位的元素在其他元素之上或之下显示。
例子：如果两个相对定位的元素重叠，较高的 z-index 值会使元素位于较低 z-index 元素的上面。
.container {
position: relative; /* 作为定位参考 */
background-color: lightblue;
padding: 20px;
border: 1px solid #000;
}
.relative-child {
position: relative;
top: 20px; /* 向下移动 */
left: 30px; /* 向右移动 */
background-color: lightcoral;
padding: 10px;
border: 1px solid #000;
}
.absolute-child {
position: absolute; /* 相对于.container定位 */
top: 10px; /* 相对于.container的偏移 */
left: 10px;
background-color: lightgreen;
padding: 10px;
border: 1px solid #000;
}
3 绝对定位 absolute
1 基本概念
-
脱离文档流：使用 position: absolute 的元素会从正常的文档流中移除。这意味着该元素不会影响文档中的其他元素布局，也不会被其他元素影响。其位置是完全独立的。
-
定位参考：position: absolute 的元素会根据其最近的定位祖先（即具有 position: relative、position: absolute 或 position: fixed 的祖先）进行定位。如果没有这样的祖先，则相对于文档的根元素 进行定位。
- 定位属性
top、right、bottom 和 left：这些属性用于指定元素相对于其定位祖先的精确位置。
top: 元素的上边缘距离其定位祖先的上边缘的距离。 right: 元素的右边缘距离其定位祖先的右边缘的距离。
bottom: 元素的下边缘距离其定位祖先的下边缘的距离。 left: 元素的左边缘距离其定位祖先的左边缘的距离。
-
层叠上下文
z-index：position: absolute 的元素可以使用 z-index 属性来控制其层叠顺序。具有较高 z-index 的元素会显示在具有较低 z-index 的元素上面。注意，z-index 只对定位元素（position: relative、position: absolute、position: fixed）有效。 -
注意事项
- 父元素的定位：如果没有设置定位的祖先元素，position: absolute 的元素会相对于文档的根元素
进行定位。这可能会导致布局问题，因此最好确保有一个适当的定位祖先。 - 宽度和高度：position: absolute 的元素不会自动调整大小以适应内容。如果需要，可以使用 width 和 height属性来指定其尺寸。
- 浏览器兼容性：position: absolute 是广泛支持的 CSS 属性，几乎所有现代浏览器都支持它。注意在不同的浏览器和设备上的测试，以确保一致的行为。
- 使用场景：position: absolute通常用于创建弹出层、工具提示、固定位置的元素等场景。由于它从文档流中移除，因此非常适合需要精确控制位置的情况。
4 固定定位 fixed
1 基本概念
-
固定定位：使用 position: fixed 的元素会相对于视口（即浏览器窗口）进行定位。无论页面如何滚动，该元素的位置始终保持不变。
-
脱离文档流：与 position: absolute 一样，position: fixed 的元素也会从正常的文档流中移除。这意味着它不会影响其他元素的布局，也不会被其他元素影响。
- 定位属性
top、right、bottom 和 left：这些属性用于指定元素相对于视口的精确位置。
top: 元素的上边缘距离视口的上边缘的距离。 right: 元素的右边缘距离视口的右边缘的距离。
bottom: 元素的下边缘距离视口的下边缘的距离。 left: 元素的左边缘距离视口的左边缘的距离。
- 层叠上下文
z-index：position: fixed 的元素也可以使用 z-index 属性来控制其层叠顺序。具有较高 z-index 的元素会显示在具有较低 z-index 的元素上面。z-index 只对定位元素有效。
案例 固定在页面右下角的悬浮按钮
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-button {
position: fixed; /* 固定定位 */
bottom: 20px; /* 从视口底部偏移20px */
right: 20px; /* 从视口右侧偏移20px */
background-color: #007BFF;
color: white;
padding: 15px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
font-size: 24px;
text-align: center;
cursor: pointer;
z-index: 1000; /* 确保在所有内容上方 */
}
</style>
</head>
<body>
<div class="fixed-button">+</div>
</body>
</html>
5 粘性定位 sticky
position: sticky 是 CSS 中的一种定位方式，它结合了 relative 和 fixed 定位的特点。它允许元素在滚动到一定位置时变为固定定位，而在其他位置时则保持相对定位.
1 基本概念
-
粘性定位：position: sticky的元素在滚动时会“粘”在一个指定的位置上，直到其父容器的边界被滚动到视口之外。这种效果在表格头部、侧边栏等场景中非常有用。
-
相对定位和固定定位的结合：元素在正常的文档流中表现为相对定位，当滚动到指定的位置时，它会变为固定定位，并在滚动过程中保持在该位置。
- 定位属性
top、right、bottom 和 left：这些属性用于指定元素在变为固定定位时的具体位置。它们的行为与 position: fixed 中的相似，但在 position: sticky 中，元素只会在父容器的范围内“粘”在这些位置上。
top: 元素的上边缘距离父容器顶部的距离。 right: 元素的右边缘距离父容器右侧的距离。
bottom:元素的下边缘距离父容器底部的距离。 left: 元素的左边缘距离父容器左侧的距离。
6 总结
1 position属性区别
- static：默认定位，不受 top、right、bottom、left 影响。
- relative：相对于其正常位置移动，仍在文档流中。
- absolute：脱离正常文档流，相对于最近的定位祖先进行定位。
- fixed：元素脱离正常文档流，固定在视口的指定位置，不随页面滚动而移动.相对于视口固定，滚动时保持在相同位置。
- sticky：结合了 relative 和 fixed 的特性，在滚动到指定位置时固定，但仅在父容器的边界内有效。
2 z-index
z-index 用于控制堆叠上下文中元素的层级。它只对定位元素（position 为 relative、absolute、fixed 或 sticky 的元素）有效。
值：整数值，越大的值越靠近视口前景，越小的值越靠近背景。
默认：默认值为 auto，意味着元素会按照文档流中的顺序叠放。
.element {
position: relative;
z-index: 10; /* 比 z-index: 5 的元素显示在上面 */
}
z-index 只能在具有 position 属性的元素上使用。
3 文档流
文档流指的是在网页中，元素默认的排列和布局方式。通常，元素按其在HTML中的顺序从上到下、从左到右排列。文档流包括：
正常文档流：元素按默认顺序和位置显示。
浮动文档流：元素通过 float 脱离正常文档流，排列在其容器的左边或右边。
定位文档流：元素通过 position 属性进行精确定位，可能脱离正常文档流。
4 使用 position 属性来水平和垂直居中对齐一个盒子
使用 position 属性来水平和垂直居中对齐一个盒子可以通过以下步骤实现：
1. 使用绝对定位（position: absolute）
这种方法适用于固定尺寸的盒子，并需要一个具有 position: relative 的父容器来作为参考。
html
<div class="container">
<div class="box">居中对齐</div>
</div>
css
.container {
position: relative; /* 设置父容器为相对定位 */
width: 100vw; /* 容器宽度 */
height: 100vh; /* 容器高度 */
}
.box {
position: absolute; /* 设置子元素为绝对定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 向上和向左移动一半的元素宽度和高度，以实现真正的居中 */
}
2. 使用固定定位（position: fixed）
如果你希望盒子在视口中居中，即使在页面滚动时也保持居中，可以使用 position: fixed：
<div class="box">居中对齐</div>
css
.box {
position: fixed; /* 设置为固定定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 向上和向左移动一半的元素宽度和高度 */
}
3. 使用相对定位和调整位置
如果你希望盒子相对于其正常位置进行调整，可以使用相对定位：
<div class="container">
<div class="box">居中对齐</div>
</div>
css
.container {
position: relative; /* 设置父容器为相对定位 */
width: 100vw; /* 容器宽度 */
height: 100vh; /* 容器高度 */
}
.box {
position: relative; /* 设置子元素为相对定位 */
width: 200px; /* 盒子宽度 */
height: 100px; /* 盒子高度 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 向上和向左移动一半的元素宽度和高度 */
}
- 绝对定位：适合当需要在其容器中精确居中时使用。
- 固定定位：适合当需要在视口中固定居中时使用。
- 相对定位：适合当你想要相对于其正常位置进行调整时使用。
- transform: translate(-50%, -50%)是实现真正居中的关键，因为它根据元素的自身尺寸来移动，使其中心对准父容器的中心。
3143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
