【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位（上）

Oct.S

已于 2022-12-14 20:11:18 修改

阅读量2.4k

点赞数 3

分类专栏：笔记文章标签：前端 css css3

于 2022-12-07 18:37:21 首次发布

本文链接：https://blog.csdn.net/HY_Sophie/article/details/128043599

版权

笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

（上篇）

2.5 设置绝对定位元素在包含块中居中（水平与垂直）

3.5 设置固定定位元素在包含块中居中（水平与垂直）

一、相对定位（ relative ）

1.1 设置方式：

position:relative;

属性：top 、right 、bottom 、left

1.2 相对定位元素定位的参考点：

① 相对定位元素的定位是相对其正常位置，自己没有定位前的位置；

② 移动相对定位元素，它原本所占的空间不会改变；

③ 相对定位元素经常被用来作为绝对定位元素的容器块。

1.3 相对定位的特点：

① 不会脱离文档流；

② 布局中，相邻元素会参照相对定位元素原来的位置进行布局，可能造成位置重叠，定位元素显示在上；

③ 不改变原来的显示模式。

1.4 相对定位的举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 550px;
            background: pink;
            border: 5px dotted red;
        }

        .box {
            width: 300px;
            height: 150px;
            border: 5px dashed #bbb;
            margin: 10px;
            text-align: center;
            font-size: 50px;
            font-weight: 700;
            line-height: 150px;
            color: #fff;
        }

        .box1 {
            background: orange;
        }

        .box2 {
            background: yellow;
        }

        .box3 {
            background: green;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
    </div>
</body>

</html>

初始设置好三个盒子，现在对 box2 进行相对定位，改变如下：

.box2 {
    background: yellow;
    /* 相对定位，向上移动150px，向右移动200px */
    position: relative;
    top: -150px;
    left: 200px;
}

结果：

二、绝对定位（ absolute ）

2.1 设置方式：

position:absolute;

属性：top 、right 、bottom 、left

2.2 元素定位的参考点：

① 绝对定位元素参照它的包含块进行定位；

② 绝对定位元素的包含块是第一个定位（任何定位都可以）的祖先元素（从下到上），如果没有

定位的祖先元素，包含块就是整个页面。

2.3 绝对定位的特点：

① 绝对定位元素会脱离文档流，显示在其他元素上面；

② 不论显示模式是行内、行内块、块级或者浮动，设置为绝对定位，就是绝对定位的元素，拥有自己的特点；

③ 绝对定位元素的显示特点：

Ⅰ. 默认宽高被内容撑开，不存在外边距的合并和塌陷，左右外边距auto不会居中

Ⅱ. 不会被父元素作为文本，可以设置宽高、内外边距

④ 使用百分比设置位置、大小都参照包含块；

⑤ 在没有设置固定宽高的前提下，同时设置left和right可以影响宽度，同时设置top和bottom可以影响高度。

2.4 绝对定位的举例：

同1.4初始设置好三个盒子，对 box3 进行绝对定位，改变如下：

.box3 {
    background: green;
    /* 绝对定位 */
    position: absolute;
    top: 100px;
    left: 100px;
}

或者：

.box3 {
    background: green;
    /* 绝对定位 */
    position: absolute;
    top: 80px;
    right: 300px;
}

2.5 设置绝对定位元素在包含块中居中（水平与垂直）

方案一：

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

方案二：

position: absolute;
left: 50%;
top: 50%;
margin-left: -总宽度/2;
margin-top: -总高度/2;

三、固定定位（ fixed ）

3.1 设置方式：

position:fixed;

属性：top 、right 、bottom 、left

3.2 元素定位的参考点：

① 元素的位置相对于浏览器窗口是固定位置。

② 即使窗口是滚动的它也不会移动：

3.3 固定定位的特点：

同 2.3 绝对定位的特点

① 固定定位元素会脱离文档流，显示在其他元素上面；

② 不论显示模式是行内、行内块、块级或者浮动，设置为固定定位，就是固定定位的元素，拥有自己的特点；

③ 固定定位元素的显示特点：

Ⅰ. 默认宽高被内容撑开，不存在外边距的合并和塌陷，左右外边距auto不会居中

Ⅱ. 不会被父元素作为文本，可以设置宽高、内外边距

④ 使用百分比设置位置、大小都参照包含块；

⑤ 在没有设置固定宽高的前提下，同时设置left和right可以影响宽度，同时设置top和bottom可以影响高度。

3.4 固定定位的举例：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 800px;
            height: 900px;
            background: pink;
            border: 5px dotted red;
        }

        .box {
            width: 300px;
            height: 150px;
            border: 5px dashed #bbb;
            margin: 10px;
            text-align: center;
            font-size: 50px;
            font-weight: 700;
            line-height: 150px;
            color: #fff;
        }

        .box1 {
            background: orange;
            /* 固定定位，并设置居中 */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .box2 {
            background: yellow;
        }

        .box3 {
            background: green;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="box box1">box1</div>
        <div class="box box2">box2</div>
        <div class="box box3">box3</div>
    </div>
</body>

</html>

结果：