Comment utiliser top en CSS

L'attribut top en CSS peut déplacer un élément verticalement par rapport au bord supérieur de son élément parent. Vous pouvez utiliser length, pourcentage ou auto pour spécifier le décalage. length est la longueur numérique, le pourcentage est le pourcentage de décalage et auto est automatiquement calculé par le navigateur. top ne fonctionne que sur les éléments positionnés, le bord supérieur de l'élément sera affecté par la zone de marge ou la zone de contenu.

Le rôle de l'attribut top en CSS

attribut top

l'attribut top est utilisé pour définir le décalage d'un élément par rapport au bord supérieur de son élément parent. Il déplace un élément verticalement vers le haut ou vers le bas.

Utilisation de la syntaxe

<code class="css">top: <length> | <percentage> | auto;</code>

Valeur d'attribut

• <length> : une valeur numérique qui spécifie la longueur du décalage, telle que "5px" ou "1em". <length>：一个指定偏移量长度的数值，例如 "5px" 或 "1em"。
• <percentage>：一个指定偏移量百分比的数值，例如 "5%" 或 "25%"。
• auto：浏览器根据元素的父元素和内容自动计算偏移量。

示例

将一个元素向上移动 20px：

<code class="css">element {
  top: 20px;
}</code>

将一个元素向下移动其父元素高度的 50%：

<code class="css">element {
  top: 50%;
}</code>

注意

• top 属性仅适用于具有定位（例如 position: absolute 或 position: relative）的元素。
• 当 top 属性值为 auto 时，元素将沿其父元素的上边缘对齐。
• 对于块级元素，top 属性会影响其外边距框（margin box）的上边缘。对于内联元素，它会影响其内容框（content box）的上边缘。
• top 属性可以与 other 属性（如 bottom、left 和 right
<percentage> : une valeur qui spécifie le pourcentage de décalage, tel que "5 %" ou "25 %".

🎜auto : le navigateur calcule automatiquement le décalage en fonction de l'élément parent et du contenu de l'élément. 🎜🎜🎜🎜Exemple🎜🎜🎜Déplacer un élément vers le haut de 20px : 🎜rrreee🎜Déplacer un élément vers le bas de 50 % de la hauteur de son parent : 🎜rrreee🎜🎜Notez que l'attribut 🎜🎜🎜🎜top ne fonctionne que si l'élément a un positionnement (par exemple position : absolue ou position : relative). 🎜🎜Lorsque la valeur de l'attribut supérieur est auto, l'élément sera aligné le long du bord supérieur de son élément parent. 🎜🎜Pour les éléments de niveau bloc, l'attribut top affecte le bord supérieur de sa zone de marge. Pour les éléments en ligne, cela affecte le bord supérieur de leur zone de contenu. L'attribut 🎜🎜top peut être utilisé avec d'autres attributs (tels que bottom, left et right) pour obtenir un positionnement précis des éléments. 🎜🎜

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!