Mise en œuvre de la méthode de référence de positionnement absolu-tutoriel CSS-php.cn

Mise en œuvre de la méthode de référence de positionnement absolu

王林

Libérer： 2024-01-23 08:58:05

original

509 Les gens l'ont consulté

Mise en œuvre de la méthode de référence de positionnement absolu

La méthode de référence pour obtenir un positionnement absolu nécessite des exemples de code spécifiques

Avec le développement continu du développement Web, les exigences en matière de mise en page sont de plus en plus élevées. Le positionnement absolu est une méthode de mise en page courante qui spécifie avec précision la position d'un élément sur la page. Cet article expliquera comment obtenir un positionnement absolu via CSS et fournira des exemples de code spécifiques.

1. Comprendre les concepts de base du positionnement absolu

Avant de commencer à écrire du code, vous devez d'abord comprendre les concepts de base du positionnement absolu. En CSS, le positionnement absolu détermine la position d'un élément par rapport à l'élément parent le plus proche qui possède un attribut de positionnement (l'attribut position n'est pas statique). Si aucun élément parent n'a d'attribut de positionnement, la position de l'élément sera positionnée par rapport à la fenêtre du navigateur.

2. Exemple de code de positionnement absolu de base

Ce qui suit est un exemple simple de structure HTML :

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  position: relative;
  width: 400px;
  height: 300px;
}

#box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 150px;
  background-color: red;
}
</style>
</head>
<body>

<div id="container">
  <div id="box"></div>
</div>

</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé un conteneur d'éléments parent et une boîte d'éléments enfants. Le conteneur de l'élément parent utilise l'attribut position: relatif et la boîte de l'élément enfant utilise l'attribut position: absolu. Et déterminez la position et la taille de la boîte du sous-élément via les attributs haut, gauche, largeur et hauteur.

3. Méthode de référence pour obtenir un positionnement absolu

Dans le développement réel, il est parfois nécessaire d'utiliser différents objets de référence pour obtenir un positionnement absolu. Deux méthodes couramment utilisées seront présentées ici, l'une consiste à utiliser l'élément parent comme objet de référence et l'autre consiste à utiliser la limite de page comme objet de référence.

Utilisez l'élément parent comme référence pour obtenir un positionnement absolu

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="parent">
  <div class="child"></div>
</div>

</body>
</html>

Copier après la connexion

Dans l'exemple de code ci-dessus, nous avons créé un conteneur parent parent et un élément enfant enfant. Le parent du conteneur parent utilise l'attribut position: relatif et l'élément enfant child utilise l'attribut position: absolu. Utilisez les attributs top et left pour déterminer la position de l'élément enfant par rapport au parent du conteneur parent.

Utilisez la limite de la page comme référence pour obtenir un positionnement absolu

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.box {
  position: absolute;
  top: 50px;
  left: calc(50% - 100px);
  width: 200px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
</div>

</body>
</html>

Copier après la connexion

Dans l'exemple de code ci-dessus, nous avons créé un conteneur conteneur et une boîte d'éléments. Le conteneur conteneur utilise l'attribut position: relatif et l'élément box utilise l'attribut position: absolu. Utilisez les attributs top et left pour déterminer la position de la zone d'élément par rapport à la limite de la page. Dans cet exemple, nous utilisons la fonction calc() pour réaliser un centrage horizontal, où calc(50% - 100px) signifie que la distance entre le côté gauche de la zone d'élément et le bord gauche de la page est de 50 % de la largeur de la page. moins la moitié de la largeur de la boîte.

Résumé :

Grâce aux exemples des deux méthodes ci-dessus, nous pouvons obtenir un positionnement absolu en utilisant l'élément parent ou la limite de la page comme référence. Ces méthodes sont très pratiques dans la mise en page et peuvent exploiter pleinement les avantages du positionnement absolu et contrôler avec précision le placement des éléments. J'espère que l'introduction de cet article pourra vous aider.

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!