1.9Web前端基础笔记_web相对定位特点-CSDN博客

本文链接：https://blog.csdn.net/m0_64838786/article/details/123547465

文章目录

一、定位
二、相对定位
三、绝对定位
三、固定定位
四、粘滞定位
五、绝对定位元素的位置
六、元素的层级

一、定位

position属性，可选值：

static —— 默认值，元素是静止的没有开启定位

relative —— 开启元素的相对定位

absolute —— 开启元素的绝对定位

fixed —— 开启元素的固定定位

sticky —— 开启元素的粘滞定位

二、相对定位

当元素的position属性设置为relative时则开启了元素的相对定位

相对定位特点

相对定位会提升元素的层级

相对定位不会使元素脱离文档流

相对定位不会改变元素的性质（块还是行内）

偏移量（offset）

元素开启定位后，通过偏移量设置元素的位置

top —— 定位元素和定位位置上边的距离

bottom —— 定位元素和定位位置下边的距离

left —— 定位元素和定位位置左边的距离

right —— 定位元素和定位位置右边的距离

通常情况下，top/bottom中只设置一个，left/right中只设置一个

.box2{
            width: 200px;
            height: 200px;
            background-color:bisque;
            position: relative;
            left: 200px;
            top: -200px;
        }

三、绝对定位

当元素的position属性设置为absolute时则开启了元素的绝对定位

绝对定位特点

绝对定位会提升元素的层级

绝对定位会使元素脱离文档流

绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开

绝对定位的元素是相对于包含块进行定位的

绝对定位的包含块

离它最近的开启了定位的祖先元素，

如果所有的祖先元素都没有开启定位则根元素就是它的包含块

根元素（初始包含块）—— html

<!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>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .side{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:bisque;
            position: absolute;
            left:0px;
            top: 0px;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color:brown;
        }
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="inner">
        5
        <div class="side">
            6
            <div class="box2">4</div>
        </div>
    </div>
    <div class="box3">3</div>
</body>
</html>

结果：
position: absolute;

三、固定定位

当元素的position属性设置为fixed时则开启了元素的固定定位

固定定位也属于一种绝对定位，唯一不同的是：

固定定位永远参照于浏览器的视口进行定位

固定定位的元素不会随网页的滚动而滚动

四、粘滞定位

当元素的position属性设置为sticky时则开启了元素的粘滞定位

粘滞定位基本和相对定位一致，不同的是：

粘滞定位可以在元素到达某个位置时将其固定

<!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>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        body{
            height: 1500px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;            
        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .side{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: sticky;
            top: 0px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:bisque;
            position: fixed;
            left:40px;
            top: 40px;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color:brown;
        }
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="inner">
        5
        <div class="side">
            6
            <div class="box2">4</div>
        </div>
    </div>
    <div class="box3">3</div>
</body>
</html>