Maison > Article > interface Web > Comment utiliser l'attribut bottom en CSS

Comment utiliser l'attribut bottom en CSS

WBOYoriginal: 2024-02-26 21:12:061165parcourir

Comment utiliser lattribut bottom en CSS

La propriété bottom en CSS est utilisée pour définir la position du bord inférieur d'un élément par rapport à son élément parent. En ajustant la valeur de l'attribut bottom, vous pouvez modifier la position verticale de l'élément. Ce qui suit présentera en détail le rôle et l’utilisation de l’attribut bottom et fournira quelques exemples de code pour illustrer.

Le rôle de l'attribut bottom
L'attribut bottom est utilisé pour positionner un élément par rapport au bord inférieur de son élément parent. C'est l'une des propriétés de positionnement en CSS. L'utilisation de l'attribut bottom permet à l'élément de se déplacer le long du bord inférieur dans le sens vertical sans affecter la taille de l'élément lui-même.
Comment utiliser l'attribut bottom
La valeur de l'attribut bottom peut être une valeur de pixel ou une valeur en pourcentage spécifique, ou elle peut être automatique ou héritée.

Utilisation des valeurs de pixels
Vous pouvez utiliser des valeurs de pixels pour spécifier la distance d'un élément par rapport au bord inférieur de son élément parent. Par exemple, le code suivant positionne un élément à 100 pixels du bord inférieur de son élément parent :
```
.element {
position: absolute;
bottom: 100px;
}
```
Utilisation de valeurs en pourcentage
En plus d'utiliser des valeurs en pixels, vous pouvez également utiliser des valeurs en pourcentage pour définir la distance d'un élément. élément à partir du bord inférieur de son élément parent. Les valeurs en pourcentage sont calculées par rapport à la hauteur de l'élément parent. Par exemple, le code suivant définit la distance de l'élément depuis le bord inférieur de l'élément parent à 50 % de la hauteur de l'élément parent :
```
.element {
position: absolute;
bottom: 50%;
}
```
Utiliser auto et hériter
auto est la valeur par défaut de l'attribut bottom, indiquant que l'élément sera disposé selon le flux normal des documents. Si vous souhaitez réinitialiser la propriété bottom à sa valeur par défaut, vous pouvez utiliser auto.

inherit signifie que l'élément héritera de la valeur d'attribut inférieure de l'élément parent. Par exemple, le code suivant définit la valeur d'attribut bottom de l'élément pour qu'elle hérite de la valeur d'attribut bottom de l'élément parent :

.parent {
  position: relative;
  bottom: 100px;
}

.child {
  position: absolute;
  bottom: inherit;
}

Exemple de code
Voici un exemple de code complet montrant comment utiliser l'attribut bottom pour positionner le bord inférieur de un élément :
```
<!DOCTYPE html>
<html>
<head>
  <style>
 .container {
   position: relative;
   width: 300px;
   height: 300px;
   background-color: gray;
 }
 
 .element {
   position: absolute;
   bottom: 20px;
   width: 100px;
   height: 100px;
   background-color: red;
 }
  </style>
</head>
<body>
  <div class="container">
 <div class="element"></div>
  </div>
</body>
</html>
```
Dans l'exemple ci-dessus, un élément conteneur est créé et défini sur un positionnement relatif. Créez ensuite un élément à l'intérieur du conteneur et utilisez le positionnement absolu pour positionner l'élément à 20 pixels du bord inférieur du conteneur en définissant la propriété bottom sur 20px.

En lisant cet article, nous comprenons le rôle et l'utilisation de l'attribut bottom en CSS, et fournissons quelques exemples de code pour illustrer. En utilisant l'attribut bottom, nous pouvons ajuster de manière flexible la position de l'élément dans la direction verticale, rendant la mise en page plus libre.

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!

css auto 继承

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：Quelle est la syntaxe de l’attribut contain en CSS ?Article suivant：Quelle est la syntaxe de l’attribut contain en CSS ?

Articles Liés

Voir plus