一、position属性
| 属性值 | 描述 | 应用场景 |
|---|---|---|
static |
默认定位方式，元素遵循文档流正常排列，top/right/bottom/left 属性无效。 |
普通文档流布局，默认布局，无需特殊定位。 |
relative |
相对定位，相对于元素原本位置进行偏移，但仍保留原空间。 | 微调元素位置，或作为子元素绝对定位的基准（父元素设为 relative）。 |
absolute |
绝对定位，相对于最近的非 static 祖先元素定位，脱离文档流。 |
创建浮动菜单、对话框，或重构页面布局（需配合父级 relative 使用）。 |
fixed |
固定定位，相对于视口定位，不随页面滚动改变位置。 | 固定导航栏、回到顶部按钮等需要始终可见的元素。 |
sticky |
粘性定位，在特定滚动阈值前表现为 relative，超过后变为 fixed。 |
实现滚动时固定表头、侧边导航栏等效果。 |
二、定位的应用
1、static 默认定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>默认定位示例</title>
<style>
/* 父容器样式 */
.container {
width: 300px;
height: auto;
background-color: #f0f8ff; /* 浅蓝色背景 */
border: 2px solid #ddd;
margin: 20px auto;
padding: 10px; /* 内边距 */
}
/* 第一个盒子：默认定位 */
.box1 {
width: 100px;
height: 100px;
background-color: #4CAF50; /* 绿色背景 */
margin-bottom: 10px; /* 下方间距 */
}
/* 第二个盒子：默认定位 */
.box2 {
width: 100px;
height: 100px;
background-color: #FF5722; /* 橙色背景 */
margin-bottom: 10px; /* 下方间距 */
}
/* 第三个盒子：默认定位 */
.box3 {
width: 100px;
height: 100px;
background-color: #2196F3; /* 蓝色背景 */
}
</style>
</head>
<body>
<div class="container">
<div class="box1">默认定位1</div>
<div class="box2">默认定位2</div>
<div class="box3">默认定位3</div>
</div>
</body>
</html>
排列方式：
- 三个盒子按照正常的文档流从上到下排列。
- 每个盒子之间有一定的间距（通过
margin-bottom设置）。布局特点：
- 没有使用任何定位属性，盒子不会发生重叠，也不会偏移。
2、relative相对定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位示例</title>
<style>
/* 父容器样式 */
.container {
position: relative; /* 父容器设置为相对定位 */
width: 300px;
height: auto;
background-color: #f0f8ff; /* 浅蓝色背景 */
border: 2px solid #ddd;
margin: 20px auto;
padding: 10px; /* 内边距 */
}
/* 第一个盒子：相对定位 */
.box1 {
position: relative;
width: 100px;
height: 100px;
background-color: #4CAF50; /* 绿色背景 */
top: 10px; /* 向下偏移 10px */
left: 10px; /* 向右偏移 10px */
}
/* 第二个盒子：相对定位 */
.box2 {
position: relative;
width: 100px;
height: 100px;
background-color: #FF5722; /* 橙色背景 */
top: 20px; /* 向下偏移 20px */
left: 20px; /* 向右偏移 20px */
}
/* 第三个盒子：相对定位 */
.box3 {
position: relative;
width: 100px;
height: 100px;
background-color: #2196F3; /* 蓝色背景 */
top: 30px; /* 向下偏移 30px */
left: 30px; /* 向右偏移 30px */
}
</style>
</head>
<body>
<div class="container">
<div class="box1">相对定位1</div>
<div class="box2">相对定位2</div>
<div class="box3">相对定位3</div>
</div>
</body>
</html>
第一个盒子（绿色）：
相对于自身默认位置向下偏移 10px，向右偏移 10px。第二个盒子（橙色）：
相对于自身默认位置向下偏移 20px，向右偏移 20px。第三个盒子（蓝色）：
相对于自身默认位置向下偏移 30px，向右偏移 30px。
注意事项
相对定位的特点：
- 元素仍然保留在文档流中，偏移后不会影响其他元素的布局。
- 偏移的效果仅影响元素的视觉位置。
重叠问题：
- 如果偏移量较大，可能会导致元素之间发生重叠。
3、absolute绝对定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位示例</title>
<style>
/* 父容器样式 */
.container {
position: relative; /* 父容器设置为相对定位，作为子元素的定位参考点 */
width: 300px;
height: 300px;
background-color: #f0f8ff; /* 浅蓝色背景 */
border: 2px solid #ddd;
margin: 20px auto;
}
/* 第一个盒子：绝对定位 */
.box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: #4CAF50; /* 绿色背景 */
top: 10px; /* 距离父容器顶部 10px */
left: 10px; /* 距离父容器左侧 10px */
}
/* 第二个盒子：绝对定位 */
.box2 {
position: absolute;
width: 100px;
height: 100px;
background-color: #FF5722; /* 橙色背景 */
top: 50px; /* 距离父容器顶部 50px */
right: 10px; /* 距离父容器右侧 10px */
}
/* 第三个盒子：绝对定位 */
.box3 {
position: absolute;
width: 100px;
height: 100px;
background-color: #2196F3; /* 蓝色背景 */
bottom: 10px; /* 距离父容器底部 10px */
left: 50px; /* 距离父容器左侧 50px */
}
</style>
</head>
<body>
<div class="container">
<div class="box1">绝对定位1</div>
<div class="box2">绝对定位2</div>
<div class="box3">绝对定位3</div>
</div>
</body>
</html>
第一个盒子（绿色）：
位于父容器的左上角，距离顶部 10px，左侧 10px。第二个盒子（橙色）：
位于父容器的右上角，距离顶部 50px，右侧 10px。第三个盒子（蓝色）：
位于父容器的左下角，距离底部 10px，左侧 50px。
注意事项
定位参考点：
- 绝对定位的元素会相对于最近的定位祖先（
position: relative、absolute或fixed的父级元素）进行定位。- 如果没有定位祖先，则相对于
html（视口）进行定位。脱离文档流：
绝对定位的元素不会占据文档流中的空间，因此可能会与其他元素重叠。灵活布局：
绝对定位适合用于弹窗、工具提示、精确布局等场景。
4、fix固定定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位示例</title>
<style>
/* 父容器样式 */
.container {
width: 300px;
height: 300px;
background-color: #f0f8ff; /* 浅蓝色背景 */
border: 2px solid #ddd;
margin: 20px auto;
text-align: center;
}
/* 第一个盒子：固定定位 */
.box1 {
position: fixed;
width: 100px;
height: 100px;
background-color: #4CAF50; /* 绿色背景 */
top: 10px; /* 距离视口顶部 10px */
left: 10px; /* 距离视口左侧 10px */
}
/* 第二个盒子：固定定位 */
.box2 {
position: fixed;
width: 100px;
height: 100px;
background-color: #FF5722; /* 橙色背景 */
top: 10px; /* 距离视口顶部 10px */
right: 10px; /* 距离视口右侧 10px */
}
/* 第三个盒子：固定定位 */
.box3 {
position: fixed;
width: 100px;
height: 100px;
background-color: #2196F3; /* 蓝色背景 */
bottom: 10px; /* 距离视口底部 10px */
left: 10px; /* 距离视口左侧 10px */
}
</style>
</head>
<body>
<div class="container">
<p>滚动页面，观察固定定位效果。</p>
</div>
<div class="box1">固定定位</div>
<div class="box2">固定定位</div>
<div class="box3">固定定位</div>
</body>
</html>
第一个盒子（绿色）：
固定在视口的左上角，距离顶部 10px，左侧 10px。第二个盒子（橙色）：
固定在视口的右上角，距离顶部 10px，右侧 10px。第三个盒子（蓝色）：
固定在视口的左下角，距离底部 10px，左侧 10px。
注意事项
固定定位的特点：
- 元素相对于视口定位，不受父容器的影响。
- 页面滚动时，固定定位的元素始终保持在指定位置。
适用场景：
- 固定导航栏。
- 返回顶部按钮。
- 固定广告或提示框。
重叠问题：
- 如果多个固定定位的元素位置重叠，可以通过
z-index属性控制它们的层级。
5、sticky粘性定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性定位示例</title>
<style>
/* 父容器样式 */
.container {
width: 300px;
height: auto;
background-color: #f0f8ff; /* 浅蓝色背景 */
border: 2px solid #ddd;
margin: 20px auto;
padding: 10px; /* 内边距 */
}
/* 通用盒子样式 */
.box {
width: 100%;
height: 100px;
background-color: #4CAF50; /* 默认绿色背景 */
margin-bottom: 20px; /* 下方间距 */
text-align: center;
line-height: 100px; /* 垂直居中 */
color: #fff;
font-size: 16px;
}
/* 第一个盒子：粘性定位 */
.box1 {
position: sticky;
top: 0; /* 滚动到视口顶部时固定 */
background-color: #4CAF50; /* 绿色背景 */
}
/* 第二个盒子：粘性定位 */
.box2 {
position: sticky;
top: 50px; /* 滚动到距离视口顶部 50px 时固定 */
background-color: #FF5722; /* 橙色背景 */
}
/* 第三个盒子：粘性定位 */
.box3 {
position: sticky;
top: 100px; /* 滚动到距离视口顶部 100px 时固定 */
background-color: #2196F3; /* 蓝色背景 */
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">粘性定位 - Box 1</div>
<div class="box box2">粘性定位 - Box 2</div>
<div class="box box3">粘性定位 - Box 3</div>
<p>滚动页面，观察粘性定位效果。</p>
<p style="height: 1000px;">这是一个长内容区域，用于测试粘性定位。</p>
</div>
</body>
</html>
第一个盒子（绿色）：
滚动到视口顶部时固定，直到父容器的内容滚动结束。第二个盒子（橙色）：
滚动到距离视口顶部 50px 时固定，直到父容器的内容滚动结束。第三个盒子（蓝色）：
滚动到距离视口顶部 100px 时固定，直到父容器的内容滚动结束。
注意事项
粘性定位的特点：
position: sticky;是相对定位和固定定位的结合。- 元素在滚动到指定位置时变为固定定位，但超出父容器范围后恢复正常流。
父容器的限制：
- 粘性定位的元素必须在一个有滚动内容的父容器中才能生效。
- 如果父容器没有足够的高度，粘性定位可能无法触发。
浏览器支持：
position: sticky;在现代浏览器中支持良好，但在旧版 IE 中不支持。
三、综合应用
1、数字定位在图片上
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字定位在图片底部</title>
<style>
/* 容器样式 */
.image-container {
position: relative; /* 设置父容器为相对定位 */
width: 600px;
height: 300px;
margin: 20px auto;
border:5px solid #69b8ec; /* 边框 */
}
/* 图片样式 */
.image-container img {
width: 100%;
height: 100%;
display: block;
}
/* 数字容器样式 */
.number-container {
position: absolute; /* 绝对定位 */
bottom: 10px; /* 距离图片底部 10px */
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 水平居中对齐 */
display: flex; /* 使用 flexbox 布局 */
gap: 10px; /* 数字之间的间距 */
}
/* 数字样式 */
.number {
color: #fff; /* 白色字体 */
font-size: 18px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
border-radius: 50%; /* 圆形背景 */
width: 30px;
height: 30px;
line-height: 30px; /* 垂直居中 */
text-align: center; /* 水平居中 */
text-decoration: none; /* 去掉超链接下划线 */
}
/* 数字悬停效果 */
.number:hover {
background-color: rgba(209, 231, 166, 0.8); /* 背景变为白色 */
color: #000; /* 字体变为黑色 */
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://imgs.699pic.com/images/500/363/911.jpg!seo.v1" alt="图片">
<div class="number-container">
<a href="#link1" class="number">1</a>
<a href="#link2" class="number">2</a>
<a href="#link3" class="number">3</a>
<a href="#link4" class="number">4</a>
<a href="#link5" class="number">5</a>
</div>
</div>
</body>
</html>
2、窗口两侧固定广告
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>窗口两侧固定广告</title>
<style>
/* 左侧广告样式 */
.ad-left {
position: fixed; /* 固定定位 */
top: 50%; /* 垂直居中 */
left: 0; /* 靠左 */
transform: translateY(-50%); /* 垂直居中对齐 */
width: 120px; /* 广告宽度 */
height: 300px; /* 广告高度 */
background-color: #4CAF50; /* 绿色背景 */
color: #fff; /* 白色文字 */
text-align: center; /* 水平居中 */
line-height: 300px; /* 垂直居中 */
font-size: 16px; /* 字体大小 */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}
/* 右侧广告样式 */
.ad-right {
position: fixed; /* 固定定位 */
top: 50%; /* 垂直居中 */
right: 0; /* 靠右 */
transform: translateY(-50%); /* 垂直居中对齐 */
width: 120px; /* 广告宽度 */
height: 300px; /* 广告高度 */
background-color: #FF5722; /* 橙色背景 */
color: #fff; /* 白色文字 */
text-align: center; /* 水平居中 */
line-height: 300px; /* 垂直居中 */
font-size: 16px; /* 字体大小 */
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
}
/* 页面内容样式 */
.content {
width: 80%;
margin: 50px auto;
font-size: 18px;
line-height: 1.6;
text-align: justify;
}
</style>
</head>
<body>
<!-- 左侧广告 -->
<div class="ad-left">
左侧广告
</div>
<!-- 右侧广告 -->
<div class="ad-right">
右侧广告
</div>
<!-- 页面内容 -->
<div class="content">
<h1>content内容</h1>
<p>
这是一个页面，展示如何在窗口的左右两边添加固定广告。无论页面如何滚动，广告始终保持在视口的两侧。
</p>
<p>
通过使用 CSS 的固定定位（`position: fixed`），可以轻松实现这种效果。固定定位的元素相对于视口进行定位，不会随页面滚动而移动。
</p>
<p>
这种布局常用于广告、导航栏或其他需要始终可见的元素。
</p>
<p style="height: 2000px;">滚动页面，观察广告始终固定在窗口两侧的效果。</p>
</div>
</body>
</html>
- 左侧广告始终固定在视口的左侧，垂直居中。
- 右侧广告始终固定在视口的右侧，垂直居中。
- 页面滚动时，广告不会移动，始终保持在窗口两侧。
四、总结
相对定位：一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量 。
绝对定位：一般用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。
固定定位：一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等