Maison > Article > interface Web > À propos du positionnement relatif dans les présentations de positionnement

À propos du positionnement relatif dans les présentations de positionnement

高洛峰original: 2017-02-18 14:27:311500parcourir

À propos du positionnement relatif dans la disposition de positionnement CSS -relative

L'une des plus grandes caractéristiques du positionnement relatif est qu'il occupe toujours la position d'origine après s'être enfui à travers le positionnement et ne la donnera pas au flux de texte environnant .objet de classe. Le positionnement relatif est également relativement indépendant. Il a le dernier mot sur ce qu'il fait. Lorsqu'il est positionné, il est décalé par rapport à sa propre position (par rapport à l'objet lui-même).

Le positionnement relatif est souvent utilisé en combinaison avec le positionnement absolu. Généralement, la méthode de positionnement relatif est définie pour le parent et l'élément enfant peut être facilement positionné de manière absolue par rapport à lui

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

Pour plus d'articles sur le positionnement relatif dans la mise en page de positionnement, veuillez faire attention au site Web PHP chinois !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisez CSS pour implémenter plusieurs bons exemples de codes de barre de menusArticle suivant：Utilisez CSS pour implémenter plusieurs bons exemples de codes de barre de menus

Articles Liés

Voir plus