css position relative absolute fixed

relative相对定位

将定位元素偏离正常文档流，但占用正常文档流的位置。如下图中：

1.relative相对定位是相对于自身的定位，relative元素不加position定位，位置是在虚框位置。

relative元素加了position: relative;将根据top/bottom/left/right,基于虚框的margin左上外角定位的。

2.虚框为relative元素占用的正常文档流的位置，所以正常元素到下面了。

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #sub1 {
            height: 100px;
            width: 100px;
            position: relative;
            top: 100px;
            left: 100px;
            background-color: red;
        }

        #sub2 {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>

<body style="border:1px black solid">
    <div id="sub1">relative元素</div>
    <div id="sub2">正常元素</div>
</body>

absolute绝对定位

将定位元素偏离正常文档流，不占用正常文档流的位置。如下图中：

  <style>
        * {
            padding: 0;
            margin: 0;
        }

        #sub1 {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }

        #sub2 {
            height: 100px;
            width: 100px;
            /* position: relative;
            top: 100px;
            left: 100px; */
            background-color: green;
        }

    </style>
<body style="border:1px black solid">
    <div id="sub1">absolute元素</div>
    <div id="sub2">正常元素</div>
</body>

1.absolute元素的父元素没有position定位，absolute元素相对于body定位

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            /* position: absolute; */
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent">父元素
        <div id="child">absolute元素</div>
    </div>
</body>

2.absolute元素的父元素有position定位（absolute或relative），absolute元素相对于父元素的padding左上外角进行定位

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        #parent {
            height: 100px;
            width: 100px;
            background-color: yellow;
            position: absolute;
            margin: 100px;
            padding: 100px;
        }

        #child {
            height: 100px;
            width: 100px;
            position: absolute;/*或者positi:relative*/
            /* margin: 10px;
            border: 10px;
            padding: 10px; */
            top: 100px;
            left: 100px;
            background-color: red;
        }
    </style>
<body style="border:1px black solid">
    <div id="parent">父元素
        <div id="child">absolute元素</div>
    </div>
</body>

fixed固定定位

脱离文档流，不占用正常文档流，相对于body定位

相关阅读:
[LEETCODE] 初级算法/数组 1.1删除排序数组中的重复项
 [LeetCode]1.Two Sum 两数之和&&第一次刷题感想
 Panda的学习之路（3）——pandas 设置特定的值&处理没有数据的部分
 Panda的学习之路（2）——pandas选择数据
 Panda的学习之路（1）——series 和 Dataframe
NUMPY的学习之路（2）——索引，合并，分割，赋值
 numpy的学习之路（1）——创建数组以及基本运算
 SpringBoot外部配置夹加载顺序
 SpringBoot2.0官方文档的位置
 @RestController注解
原文地址：https://www.cnblogs.com/chrisghb8812/p/9909668.html