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>