CSS 美化页面（五）

一、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>