Apprenez les valeurs d'attribut communes du positionnement absolu et créez une mise en page Web unique

Pour connaître les valeurs d'attribut communes​​du positionnement absolu et créer une mise en page Web unique, des exemples de code spécifiques sont nécessaires

1. Introduction
Aujourd'hui, la conception Web fait désormais partie de la vie quotidienne des gens. Afin de rendre la mise en page de la page Web plus unique et plus belle, nous pouvons utiliser l'attribut de positionnement absolu en CSS pour y parvenir. Cet article présentera les valeurs d'attribut communes du positionnement absolu et fournira des exemples de code pour aider les lecteurs à les apprendre et à mieux les appliquer.

2. Le concept et la fonction du positionnement absolu
Le positionnement absolu est une méthode de positionnement en CSS qui nous permet de placer avec précision des éléments à des emplacements spécifiés sur des pages Web. Comparé à d'autres méthodes de positionnement, le positionnement absolu est indépendant et peut être séparé du flux de documents. Cela signifie qu'un élément en position absolue restera dans une position spécifique même si d'autres éléments changent.

3. Valeurs d'attribut de positionnement absolu couramment utilisées

1. top, right, bottom, left :
2. top : spécifie la distance entre le haut de l'élément par rapport au haut du conteneur parent ; la distance du côté droit de l'élément par rapport au côté droit du conteneur parent ;
3. bottom : spécifie la distance depuis le bas de l'élément par rapport au bas du conteneur parent ;
4. left : spécifie la distance depuis le côté gauche ; de l’élément par rapport au côté gauche du conteneur parent.
5. L'exemple de code suivant montre comment effectuer un positionnement absolu via les attributs haut et gauche :

<style>
#myElement {
    position: absolute;
    top: 50px;
    left: 100px;
}
</style>
<div id="myElement">
    我是一个绝对定位的元素
</div>

z-index :

2. z-index peut contrôler l'ordre d'empilement vertical des éléments, avec une valeur d'index z plus élevée. L'élément remplace l'élément ayant la valeur la plus faible.
3. L'exemple de code suivant montre comment empiler deux éléments positionnés de manière absolue à l'aide de l'attribut z-index :

<style>
#element1 {
    position: absolute;
    top: 100px;
    left: 100px;
    background-color: green;
    z-index: 1;
}
#element2 {
    position: absolute;
    top: 150px;
    left: 150px;
    background-color: red;
    z-index: 2;
}
</style>
<div id="element1">
    我是元素1
</div>
<div id="element2">
    我是元素2
</div>

position: relative;

3. Le positionnement relatif est une valeur d'attribut complémentaire au positionnement absolu, qui permet aux éléments d'être positionnés de manière relative. dans sa propre position tout en restant dans le flux documentaire.
4. L'exemple de code suivant montre comment utiliser le positionnement relatif pour obtenir un positionnement absolu :

<style>
#parent {
    position: relative;
    width: 400px;
    height: 300px;
    background-color: lightgray;
}
#child {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<div id="parent">
    <div id="child">
        我是一个相对定位的元素
    </div>
</div>

4. Résumé

Le positionnement absolu est l'un des outils importants pour obtenir une mise en page Web unique. En maîtrisant les valeurs d'attribut communes du positionnement absolu, nous pouvons placer avec précision des éléments à des positions spécifiées et contrôler leur ordre d'empilement. Nous espérons que les exemples de code fournis dans cet article pourront aider les lecteurs à mieux comprendre et appliquer les connaissances pertinentes du positionnement absolu et à créer des mises en page Web uniques et intéressantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!