H5C3基础学习总结之CSS四种定位模式

程序猿tu

已于 2022-02-03 22:39:52 修改

阅读量503

点赞数 1

分类专栏： HTML/CSS 文章标签： css 前端

于 2022-02-03 22:15:35 首次发布

本文链接：https://blog.csdn.net/qq_41171409/article/details/122779010

版权

HTML/CSS 专栏收录该内容

17 篇文章 8 订阅

订阅专栏

本文详细解析了CSS定位的四种基本模式（static, relative, absolute, fixed）及其作用，以及边偏移属性在确定元素位置中的关键作用。重点介绍了相对定位、绝对定位和固定定位的特性，并提供了代码示例以帮助读者掌握这些概念。

摘要由CSDN通过智能技术生成

定位组成

定位 = 定位模式 + 边偏移

定位模式适用于制定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，通过position属性来设置：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是使定位的盒子移动到最终位置，属性值如下：

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

相对定位relative(重要)

相对定位是元素在移动位置的时候，相对于它原来的位置来说的。

语法：

选择器 {

position: relative;

}

注意细节：

他是相对于自己原来的位置来移动的。（移动位置的时候，参照点还是自己原来的位置）
原来在标准流的位置继续占有，后面的后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
给绝对定位当爹的！！！（后面进行解释）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2">

    </div>
    
</body>
</html>

绝对定位absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

语法：

选择器 {

position: absolute;

}

注意细节：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准来定位。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点来移动位置。
绝对定位不再占有原先的位置。（脱标）

绝对定位-无父级或父级无定位，代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-无父亲或者父亲无定位</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            /* top: 10px;
            left: 10px; */
            /* top: 100px;
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
            <div class="son"></div>
    </div>
   
</body>
</html>

绝对定位-父级有定位，代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
          
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            left: 30px;
            bottom: 10px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="yeye">
            <div class="father">
                    <div class="son"></div>
            </div>
    </div>
   
   
</body>
</html>

固定定位fixed（重要）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：在浏览器页面滚动的时候，在浏览器侧边有一个固定内容，其位置相对于浏览器窗口位置没有发生改变，

语法：

选择器 {

position: fixes;

}

注意细节：

以浏览器可是窗口为参照点移动位置
跟父元素没有任何关系
不随滚动条滚动
固定位置不再占有原先的位置（脱标，可以看作一种特殊的绝对定位）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位</title>
    <style>
        .dj {
            position: fixed;
            top: 100px;
            left: 40px;
        }
    </style>
</head>
<body>
    <div class="dj">
        <img src="images/pvp.png" alt="">
    </div>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    <p>请尽情吩咐妲己，主人</p>
    
</body>
</html>

固定定位小技巧：固定在版心右侧的位置

步骤：

让固定位置的盒子left：50%，使盒子走到浏览器可视区域的一半位置。
再让固定位置的盒子margin-left：版心宽度的一半宽度。多走版心宽度的一半位置。

这样就可以让固定定位的盒子贴着版心右侧对齐。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>固定定位小技巧-固定到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            /* 1. 走浏览器宽度的一半 */
            left: 50%;
            /* 2. 利用margin 走版心盒子宽度的一半距离 */
            margin-left: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
  
</body>
</html>

粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合。

语法：

选择器 {

position: sticky; top: 10px;

}

注意细节：

以浏览器的可视窗口为参照点移动元素（固定位置特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效果

跟谁页面滚动搭配使用，兼容性较差，IE不支持。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">我是导航栏</div>
</body>
</html>

使用技巧之子绝父相（无敌重要）（给绝对定位当爹的解释）

意思是子级使用绝对定位，父级则需要使用相对定位。

使用原因：因为父级需要占有位置，因此需要使用相对定位。子级盒子不需要占有位置，则是使用决定定位。

注意细节：

子级使用绝对位置，不会占有位置。可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子内显示。
父盒子布局的时候，需要占有位置，因此父级只能是相对定位。

总结

定位模式	是否脱标	移动位置	使用频率
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	较少