CSS中的子绝父相布局

前言

在CSS中有三种定位方式:相对定位、绝对定位和固定定位


一、相对定位

相对定位的属性是position:relative,如过对某个元素设置了相对定位,元素就会根据自身左顶点进行位置偏移,元素还是会占用之前的位置;如图
在这里插入图片描述

  <style>
        .fa{
    
    
            margin: 0 auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .div{
    
    
            width: 100px;
            height: 100px;
            background-color: red;
            //position: absolute;
            position:relative;
            top: 20px;
            left: 20px;
        }
        .div1{
    
    
            width: 100px;
            height: 100px;
            background-color: gold;
        }

    </style>

<body>
    <div class="fa">
        <div class="div">

        </div>
        <div class="div1">

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

二、绝对定位

绝对定位的属性是position:absolute,如果对元素设置了绝对定位,元素位置偏移就会根据body的左顶点进行偏移。
在这里插入图片描述
如图所示,当元素设置了绝对定位。就会脱离文档流进入浮动层,absolute的层级要比float的要高,所以float会被覆盖,而且如果给两个元素设置了absolute,前一个会被后一个覆盖

三、固定定位

固定定位的属性是position:fixed;固定定位会把元素固定在页面的某个位置,会随着滚动条的移动而移动。

四、子绝父相布局

子绝父相布局就是给子级元素设置绝对定位,给父级元素设置相对定位的布局方式,这样子级元素就会根据父级的左顶点进行位置偏移。

  <style>
        .fa{
    
    
            margin: 0 auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position:relative;
        }
        .div{
    
    
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>



<body>
    <div class="fa">
        <div class="div">

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

在这里插入图片描述
通过子绝父相布局可以解决许多麻烦的操作,一般在网页布局中是很常用的解决方式了。


猜你喜欢

转载自blog.csdn.net/Inory_ye/article/details/111463148