欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

关于定位布局中的相对定位

程序员文章站 2022-05-06 09:01:26
...
关于CSS中定位布局的相对定位-relative

相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。

相对定位常与绝对定位结合用,一般是给父级设定相对定位方式,子级元素就可以相对它进行方便的绝对定位了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .orange{
        width: 400px;
        height: 300px;
        background-color: orange;
    }
/*红色区块设置为相对布局,虽然往下便宜150PX,但仍占据了位置,使得黄色,绿色无法浮动到最左边*/
    .red{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
        position:relative;
        margin-top: 150px;

    }

    .yellow{
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
    }
    
    .green{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
    }

/*蓝色区块相对自身偏离了30px,10px,但黑色区块的位置是以蓝色之前的位置向下偏移10px*/

    .blue{
        width:50px;
        height: 50px;
        background-color: blue;
        position: relative;
        top:30px;
        left:10px;

    }

    .black{
        width:30px;
        height: 30px;
        background-color: black;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    <p class="orange">
        <p class = "red">
            <p class = "blue"></p>
            <p class = "black"></p>
        </p>
        <p class = "yellow"></p>
        <p class = "green"></p>
    </p>
</body>
</html>

更多关于定位布局中的相对定位 相关文章请关注PHP中文网!

相关标签: css