Comment définir la position de l'image img en CSS

Pour définir la position de l'image img en CSS, vous devez spécifier le type de positionnement (statique, relatif ou absolu), puis utiliser les attributs top, right, bottom et left pour définir le décalage de position. Ces décalages spécifient la position de l'image par rapport à son type de positionnement.

Comment définir la position de l'image img en CSS

En CSS, vous pouvez utiliser position, top, right, bottom et left pour définir la position de l'image. position、top、right、bottom 和 left 属性来设置图片的位置。

1. 定位类型

首先，需要设置图片的定位类型。有以下三种定位类型：

• static（默认）：图片位于其正常流位置。
• relative：图片相对于其正常流位置进行偏移。
• absolute：图片相对于其父元素进行定位，脱离正常流。

2. 位置偏移量

使用 top、right、bottom 和 left 属性设置图片相对于其定位类型的位置偏移量：

• top：相对于图片顶部边框的偏移量。
• right：相对于图片右侧边框的偏移量。
• bottom：相对于图片底部边框的偏移量。
• left：相对于图片左侧边框的偏移量。

示例

要将图片绝对定位在页面右下角，可以这样设置：

<code class="css">img {
  position: absolute;
  bottom: 0px;
  right: 0px;
}</code>

其他提示

• 偏移量值可以是像素（px）、百分比（%）或关键字（例如 auto）。
• 如果设置了多个位置属性，它们将以以下优先级应用：top、right、bottom、left。
• 当使用 absolute 定位时，图片将从正常流中脱离，意味着它不会再占据空间。
• 使用 z-index

• 🎜statique (par défaut) : 🎜L'image est dans sa position de flux normale. 🎜
• 🎜relative : 🎜L'image est décalée par rapport à sa position d'écoulement normale. 🎜
• 🎜absolu : 🎜L'image est positionnée par rapport à son élément parent, hors du flux normal. 🎜🎜🎜🎜2. Décalage de position 🎜🎜🎜 en utilisant les attributs top, right, bottom et left. décalage de position de l'image par rapport à son type de positionnement : 🎜
  • top : Le décalage par rapport à la bordure supérieure de l'image. 🎜
  • right : Décalage par rapport au bord droit de l'image. 🎜
  • bottom : Décalage par rapport à la bordure inférieure de l'image. 🎜
  • gauche : Décalage par rapport au bord gauche de l'image. 🎜🎜🎜🎜Exemple🎜🎜🎜Pour positionner l'image absolument dans le coin inférieur droit de la page, vous pouvez la définir comme ceci :🎜rrreee🎜🎜Autres conseils🎜🎜
    • La valeur de décalage peut être en pixels ( px), pourcentage (% ) ou mot-clé (tel que auto). 🎜
    • Si plusieurs propriétés de position sont définies, elles seront appliquées avec la priorité suivante : top, right, bottom, gauche. 🎜
    • Lors de l'utilisation du positionnement absolu, l'image sera détachée du flux normal, ce qui signifie qu'elle ne prendra plus de place. 🎜
    • Utilisez l'attribut z-index pour contrôler l'ordre d'empilement des images dans les éléments qui se chevauchent. 🎜🎜

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!