定位组件使用

html 定位

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

// 
本身的display为 block


this a frist

    this a three

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进行位置调整
可以理解为存在一个自己的“私有层”相对于自己的原有位置进位移
未设置

    


    abcddddd

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进行位置调整
可以理解为有自己的私有层根据容器左上角进行位移

混合应用一下

    
 
    


    abcddddd

 #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;
        }

3.jpg

让白色方块进入了红色方块的图层下