html 定位

普通流定位从上到下从左到右子元素会排列在父容器的element的内部
display 每个元素都有自己的属性平时不推荐改变
常见的为三种：
display: inline-block ; 高度宽度都可调试可以同行
display: block; 高度和宽度可以调试，特点独占一行
display: inline;可以在同一行但是高度和宽度不可调试

// <div>本身的display为 block
<style>
 #frist{
        font-size: 20px;
        width: 300px;
        height: 300px;
        background-color: #e50b0b;
    }
#three{
        width: 200px;
        height: 200px;
        background-color: #7100c8;
        font-size: 30px;
        display: inline;    
}
</style>
<body >
<div id="frist">this a frist
<div id="three">
    this a three
</div>
</div >
</body>

1.jpg

加上display: inline;

#three{
        width: 200px;
        height: 200px;
        background-color: #7100c8;
        font-size: 30px;
        display: inline;    
}

2.jpg

将display:变为lnline-block

 #three{
        width: 200px;
        height: 200px;
        background-color: #7100c8;
        font-size: 30px;
        display: inline-block;

    }

3.jpg

相对定位position:relative

在普通流的基础上相对偏移
分别关键词 top left 关键字 bottom right进行位置调整
可以理解为存在一个自己的“私有层”相对于自己的原有位置进位移
未设置

<body>
<div id="b">
    
</div>
<div id="a">
    abc<span>ddddd</span>
</div>

</body>

3.jpg

 #b{
            position: relative;
            right: -20px;
            font-size: 3em;
            height: 100px;
            background-color: #e50b0b;
            width: 200px;
            height: 200px;
        }
        #a{
            position: relative;

            top: 60px;
            font-size: 3em;
            background-color: #7100c8;
            width: 200px;
            height: 200px;
        }

设置后

3.jpg

绝对定位 position：absoult

在普通流中完全消失
位置以在其所在容器的左上角为原点，进行偏移
使用left top botto right进行位置调整
可以理解为有自己的私有层根据容器左上角进行位移

混合应用一下

<div id="b">
    <div id="c"> </div>
    
</div>
<div id="a">
    abc<span>ddddd</span>
</div>

 #b{
            position: relative;
            right: -20px;
            font-size: 3em;
            height: 100px;
            background-color: #e50b0b;
            width: 200px;
            height: 200px;
        }
        #a{
            position: relative;

            top: -60px;
            font-size: 3em;
            background-color: #7100c8;
            width: 200px;
            height: 200px;
        }
        #a span{
            display: block;
            color: cadetblue;
        }
        #c{

            position: absolute;

            background-color: #fff;
            top: 10px;
            left: 10px;
            width: 50px;
            height: 50px;
        }

3.jpg

白色的就是绝对定位可以通过 z-index可以将图层显示数越大越在上层
我将z-index设置成-1

#c{

            position: absolute;
            z-index: -1;
            background-color: #fff;
            top: 10px;
            left: 10px;
            width: 50px;
            height: 50px;
        }