27.html的定位（position）和偏移量（offset）

文章目录定位偏移量（offset）相对定位绝对定位固定定位粘滞定位定位定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置可选值：static：默认值，元素静止，没有开启定位relative：开启元素的相对定位absolute：开启元素的绝对定位fixed：开启元素的固定定位sticky：开启元素的粘滞定位偏移量（offset）元素开启定位后，可以通过偏移量来设置元

Keeling1720

6136人浏览 · 2021-04-25 20:21:48

Keeling1720 · 2021-04-25 20:21:48 发布

文章目录

定位

定位

定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置
可选值：
static：默认值，元素静止，没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位

偏移量（offset）

元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离
偏移量跟margin的区别其实就是：
使用偏移的话，只移动当前元素，且不会对其他元素进行挤压（会盖住其他元素）
使用margin的话，元素向某个方向移动会将对应方向上的元素进行挤压（会推开其他元素）
听不懂没关系，后边会有例子。

相对定位

当position的属性值为relative时，开启相对定位。

开启相对定位特点：
①不设置偏移量，元素无变化
②参照元素在文档流中的位置进行定位
③相对定位会提升元素的层级（当和其他元素重叠时，会盖住其他元素）
④相对定位不会脱离文档流
⑤不会改变元素的性质（块元素还是块元素，行内元素还是行内元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            /*position: relative;*/
            /*bottom: 100px;*/
            /*left: 100px;*/
        }

        .box3{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

显示：
在这里插入图片描述
现在使用定位对其进行上图所示修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            /*开启相对定位*/
            position: relative;
            /*向下偏移100px，向左偏移100px，*/
            bottom: 100px;
            left: 100px;
        }

        .box3{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

在这里插入图片描述

绝对定位

当position的属性值为absolute时，开启相对定位。
开启绝对定位的特点：
①不设置偏移量，元素的位置不会发生变化
②元素会从文档流中脱离
③绝对定位会改变元素的性质（行内变成块，块的宽高被内容撑开）
④绝对定位会使元素提升一个层级
⑤绝对定位元素相对于其包含块进行定位(包含块的定义在下边）
⑥
**
包含块（containing block）的概念：
正常情况下，包含块就是离当前元素最近的祖先块元素。
开启绝对定位的情况下，包含块就是离他最近的开启了定位的祖先元素。（只要position的属性值不为static都属于开启定位）如果所有的祖先都米有开启定位，那么包含块就是html元素（根元素）。

比如：
现在有以下结构（正常情况）

<div>
	<div></div>	<!--我的包含块元素是上面的div-->
</div>

但是，如果是这种情况：

<div>
	<span><!--我的包含块元素是上面的div-->
		<em>hello</em><!--我的包含块元素是上面的div,因为span不是块元素-->
	</span>	
</div>

开启绝对定位下的情况：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .box3{
            background-color: grey;
        }

        .box4{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box5{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>

    <div class="box3">3</div>
</body>
</html>

当box4和box5都没有开启定位，显示：
在这里插入图片描述
当box4开启定位：

当box5开启定位：

综上，应该不难看出什么是包含块了吧。
下面，我们回归正题，讲讲绝对定位的例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            position: absolute;
            left: 100px;
            top: 0px;
        }

        .box3{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

显示：
在这里插入图片描述
这里3为什么会往上挪呢，主要是因为绝对定位会让元素脱离文档流。
注意1：这里如果不设置top为0的话，他的显示是下面这样的：

注意2：如果没有清除浏览器默认样式的话，1和2的位置会有所重叠，如下所示：
在这里插入图片描述

固定定位

当position的属性值为fixed时，开启固定定位。
开启固定定位的特点：基本上跟绝对定位一样，唯一不同的是固定定位永远参照于浏览器的视口进行定位。
下面贴两端代码进行解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            position: fixed;
            top:0px;
            left:0px;
        }

        .box3{
            background-color: grey;
        }

        .box4{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box5{
            width: 200px;
            height: 200px;
            background-color: tomato;
            position: relative;
        }

    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
    4
    <div class="box5">
        5
        <div class="box2">2</div>
    </div>
</div>

<div class="box3">3</div>
</body>
</html>

显示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            font-size: 30px;
        }

        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: #bbffaa;
        }

        .box2{
            background-color: orange;
            position: fixed;
            top:0px;
            left:0px;
        }

        .box3{
            background-color: grey;
        }

        .box4{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }

        .box5{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

    </style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">
    4
    <div class="box5">
        5
        <div class="box2">2</div>
    </div>
</div>

<div class="box3">3</div>
</body>
</html>

显示：
在这里插入图片描述
显然，无论他的祖先是否有设置定位，设置了固定定位的元素都在同一个地方，即他的包含块都是根元素（html）。这就是固定元素和绝对元素的唯一区别。

粘滞定位

兼容性不是很好（低版本的浏览器等会用不了，例如老牌IE浏览器），故这里不多做介绍。

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

计算机视觉（opencv）实战——人脸识别：LBPH / Eigen / Fisher 综合使用指南（训练、保存、加载、预测与调优）

收集至少 5~10 张/人的多光照、多表情照片（LBPH 少量也能用）。用级联/关键点检测裁切并对齐人脸，转为灰度并统一尺寸（如 200×200）。做直方图均衡或其他归一化。按目录加载数据，构建。选择识别器（LBPH/Eigen/Fisher），进行train()。使用验证集调参并设定confidence阈值。save()模型与 label 映射。部署时read()模型，并在实时流中检测 -> 预

2048 AI社区

每日AI学习笔记----Qwen3-Omni 、HuatuoGPT-o1医学复杂推理

最近作者开始上班了~上班两个多月，终于也是找到一点点工作的节奏~~。也深感到自己的不足，常在思考，选择这个行业是否正确，但是既然选择了，那么去深入也是乐趣所在。没有什么比静下心来学习能让你更踏实。浮躁了就去学习，想谈恋爱了就去学习，烦了就去学习吧，孩子。因此作者决定只要工作不加班到很晚，每天都要坚持至少一小时的AI新知识和技术的学习。

2048 AI社区

自定义Traits应用

重新排列范围，使得指定位置的元素等于排序后的元素，并且左边的元素都不大于它，右边的元素都不小于它。算法的原理是 “覆盖” 要删除的元素，将保留的元素移到前面，返回新的逻辑尾迭代器，但。对范围内的每个元素应用一个函数，并将结果存储在另一个范围内。移除范围内连续的重复元素，返回新的逻辑结尾迭代器。旋转范围内的元素，使中间元素成为新的第一个元素。这些算法不会改变它们所操作的容器中的元素。这些算法会修改它