css定位样式

Citrus_73

已于 2024-09-25 23:46:13 修改

阅读量214

点赞数 6

分类专栏：前端知识文章标签： css 前端

于 2024-09-25 23:45:09 首次发布

本文链接：https://blog.csdn.net/m0_71190099/article/details/142535806

版权

前端知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

固定定位（Fixed Positioning）：
- 元素相对于浏览器窗口进行定位，即使页面滚动，元素也会固定在同一个位置。
- position: fixed;
静态定位（Static Positioning）：
- 默认的定位方式，元素按照正常的文档流进行布局。
- position: static;（默认值，不需要明确设置）
粘性定位（Sticky Positioning）：
- 是一种混合定位方式，结合了相对定位和固定定位的特点。
- position: sticky;
- 元素在跨越特定阈值前为相对定位，之后为固定定位。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ margin: 0; /* 清楚页面默认的外边距 */ }
        p{
            width: 100px; /* 设置宽 */
            height: 50px; /* 设置高 */
            margin: 0; /* 清楚p元素默认的外边距 */
        }
        .block1{
            background-color: red; /* 设置背景色 */
            position: fixed; /* 固定定位 */
            top: 0; /* 距离页面顶部距离 */
            left: 150px; /* 距离页面左侧距离 */
        }
        .block2{
            background-color: blue; /* 设置背景色 */
            position: static; /* 固定定位 */
        }
        .block3{
            background-color: yellow; /* 设置背景色 */
            position: sticky; /* 固定定位 */
            left: 0; /* 距离页面左侧距离 */
            right: 0; /* 距离页面右侧距离 */
        }
    </style>
</head>
<body>
    <p class="block1">1-固定定位</p>
    <p class="block2">2-静态定位</p>
    <p class="block3">3-粘性定位</p>
</body>
</html>

图例：