Heim > Artikel > Web-Frontend > Informationen zur relativen Positionierung in Positionierungslayouts

Informationen zur relativen Positionierung in Positionierungslayouts

高洛峰Original: 2017-02-18 14:27:311459Durchsuche

Informationen zur relativen Positionierung im CSS-Positionierungslayout -relative

Eines der größten Merkmale der relativen Positionierung besteht darin, dass sie nach dem Weglaufen durch die Positionierung immer noch die ursprüngliche Position einnimmt und diese nicht an den umgebenden Textfluss weitergibt . Klassenobjekt. Die relative Positionierung ist auch relativ unabhängig. Sie hat das letzte Wort darüber, was zu tun ist, und ist von ihrer eigenen Position (relativ zum Objekt selbst) versetzt.

Relative Positionierung wird oft in Kombination mit absoluter Positionierung verwendet. Im Allgemeinen wird die relative Positionierungsmethode für das übergeordnete Element festgelegt, und das untergeordnete Element kann bequem absolut relativ dazu positioniert werden

<!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>

Weitere verwandte Artikel zur relativen Positionierung im Positionierungslayout finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS, um mehrere gute Beispielcodes für die Menüleiste zu implementierenNächster Artikel：Verwenden Sie CSS, um mehrere gute Beispielcodes für die Menüleiste zu implementieren

In Verbindung stehende Artikel

Mehr sehen