So verwenden Sie top in CSS

Das Top-Attribut in CSS kann ein Element vertikal relativ zur Oberkante seines übergeordneten Elements verschieben. Sie können Länge, Prozentsatz oder Auto verwenden, um den Versatz anzugeben. Länge ist die numerische Länge, Prozentsatz ist der prozentuale Versatz und auto wird automatisch vom Browser berechnet. top gilt nur für Elemente mit Positionierung, die Oberkante des Elements wird durch das Randfeld oder das Inhaltsfeld beeinflusst.

Die Rolle des Top-Attributs in CSS

Top-Attribut

Top-Attribut wird verwendet, um den Versatz eines Elements relativ zur Oberkante seines übergeordneten Elements festzulegen. Es verschiebt ein Element vertikal nach oben oder unten.

Syntax verwenden

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

Attributwert

• <length>: Ein numerischer Wert, der die Länge des Offsets angibt, z. B. „5px“ oder „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>: Ein Wert, der den Offset-Prozentsatz angibt, z. B. „5 %“ oder „25 %“.

🎜auto: Der Browser berechnet den Offset automatisch basierend auf dem übergeordneten Element und dem Inhalt des Elements. 🎜? Position: absolut oder Position: relativ). 🎜🎜Wenn der oberste Attributwert auto ist, wird das Element am oberen Rand seines übergeordneten Elements ausgerichtet. 🎜🎜Bei Elementen auf Blockebene wirkt sich das Top-Attribut auf den oberen Rand seines Randfelds aus. Bei Inline-Elementen betrifft es den oberen Rand ihres Inhaltsfelds. Das 🎜🎜top-Attribut kann zusammen mit anderen Attributen (z. B. bottom, left und right) verwendet werden, um eine präzise Positionierung von Elementen zu erreichen. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie top in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!