關於定位佈局中的相對定位-css教學-PHP中文網

關於定位佈局中的相對定位

高洛峰

發布： 2017-02-18 14:27:31

原創

1467 人瀏覽過

關於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中文網！