CSS之position

在我们学习css中布局常用到的position，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，今天主要是说一下static、relative、absolute、fixed四个的作用和用法。在学习这些之前，我们需要知道标准文档流的概念

标准文档流：标准文档流指在不使用其他与排列和定位相关的特殊CSS规则时，元素的默认排列规则，说白了就是没做改变的页面元素。

一、static(静态定位)

这是position的默认值，表示没有定位。这个没有什么好说的。

二、absolute(绝对定位)

表示采用绝对定位方式，相对于position值不是static的父容器进行定位，该值会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位,见代码

<!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>
        .relative{
             400px;
            height: 300px;
            background-color: pink;
            position: relative;
        }
        .static{
             300px;
            height: 200px;
            background-color: green;
            border: 5px solid #000;
            margin:auto;

        }
        .absolute{
            position:absolute;
            left: 10px;
            top: 0;
             200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="relative">
        <div class="static">
            <div class="absolute"></div>
        </div>
    </div>
</body>
</html>

结果：

这里要知道的是body的默认属性position不为static，因为当relative盒子父亲不为static时候，其会相对于body来进行定位

三、relative(相对定位)

表示采用相对定位的方式，相对于元素原本的位置进行定位，该值不会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位

在这里我们需要知道在relative相对移动后，其实是相对于自己移动了，是视觉上的移动，其实其仍然占有原来的文档流中的位置。

下面我们就来看一下：

代码：relative移动之前的样子

<!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>
        .father{
            margin: 50px 0 0 50px;
        }
        .re1{

position: relative;


             150px;
            height: 150px;
            background-color: pink;
        }
        .re2{
　　　　　　　 position:relative;
             150px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="re1"></div>
    <div class="re2"></div>
</div>
</body>
</html>

结果:

现在我们加上属性：

 .re1{
            position: relative;
            bottom: 20px;
             150px;
            height: 150px;
            background-color: pink;
        }

结果：

可以看出relative在移动后还是还是占有原来的文档流中的位置

注意：absolute定位后，其已经不占有原来的位置，我们把刚才那个relative定位改成absolute定位

 .re1{
            position: absolute;
            top: 20px;
             150px;
            height: 150px;
            background-color: pink;
        }

可以看出已经不占有位置了，skyblue这个div已经移动上去了，其实可以想想浮动的时候也是类似。

四、fixed

表示采用固定定位的方式，相对于浏览器窗口进行定位，并且无论滚动条怎么滚动，使用了该值的元素都始终处于固定位置，该值会使元素脱离文档流，使用该值后可以用left，right，top，bottom对元素进行移动定位

上代码：

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
             100%;
            height: 5000px;
            background-color: pink;

        }
        .fix{
            position:fixed;
            right: 0;
        }
    
    </style>
</head>
<body>
    <div class="father">
        <div class="fix">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2513539719,1581894780&fm=26&gp=0.jpg" alt="">

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

结果：

可以看出当鼠标下滑时图片也是固定不动的；

CSS之position

一 、static(静态定位)

二、absolute(绝对定位)

四、fixed

一、static(静态定位)