Maison >interface Web >tutoriel CSS >En positionnement absolu, quels paramètres peuvent servir de référence ?

En positionnement absolu, quels paramètres peuvent servir de référence ?

WBOYoriginal: 2024-01-23 09:55:06725parcourir

Le positionnement absolu est une méthode de mise en page couramment utilisée dans le développement front-end. Elle peut placer avec précision des éléments à des positions spécifiées et suivre le défilement de la page sans changement de position. Lors du positionnement absolu, nous devons nous référer à certains paramètres pour garantir que l'élément peut être positionné avec précision à l'emplacement souhaité. Cet article présentera plusieurs paramètres couramment utilisés comme référence et donnera des exemples de code spécifiques.

1. Paramètres gauche, haut, droite, bas

En positionnement absolu, en définissant les paramètres gauche, haut, droite et bas de l'élément, vous spécifiez la gauche, le haut, la droite et le bas de l'élément par rapport à son contenu. élément. décalage latéral. Ces paramètres peuvent être des valeurs de pixels spécifiques ou des valeurs en pourcentage.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

Dans le code ci-dessus, l'élément box est positionné à 50 px de décalage par rapport au coin supérieur gauche de l'élément conteneur en définissant les paramètres gauche et supérieur sur 50 px.

2. Paramètre Z-index

Il peut y avoir plusieurs éléments sur la page pour un positionnement absolu Si ces éléments se chevauchent, le paramètre z-index peut être utilisé pour contrôler l'ordre d'empilement des éléments. Les éléments avec des valeurs d'index z plus grandes sont placés plus près de l'avant et couvriront d'autres éléments.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        z-index: 1;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

Dans le code ci-dessus, la valeur z-index de l'élément box1 est 1 et la valeur z-index de l'élément box2 est 2, donc l'élément box2 couvrira l'élément box1.

3. Positionnez l'attribut position de l'élément parent

Lorsque vous effectuez un positionnement absolu, vous devez faire attention à l'attribut position de l'élément parent. Si l'attribut position n'est pas défini sur l'élément parent positionné, la position de l'élément positionné de manière absolue sera positionnée par rapport à la zone visible du document. Si l'élément parent positionné a l'attribut position défini, la position de l'élément positionné de manière absolue sera positionnée par rapport à l'élément parent positionné.

Exemple de code :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

Dans le code ci-dessus, l'élément parent de positionnement des éléments box1 et box2 est l'élément conteneur, donc les éléments box1 et box2 sont positionnés par rapport à l'élément conteneur.

Le positionnement absolu est une méthode de mise en page très courante dans le développement front-end. En se référant aux paramètres ci-dessus, les éléments peuvent être positionnés de manière flexible et précise. Dans le développement réel, nous pouvons utiliser ces paramètres de manière flexible en fonction des besoins pour obtenir diverses mises en page.

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!

堆 position

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：Méthodes de classification et de traitement des défauts absolus de positionnementArticle suivant：Méthodes de classification et de traitement des défauts absolus de positionnement

Articles Liés

Voir plus