CSSでトップを使う方法

CSS の top プロパティは、親要素の上部を基準とした要素のオフセット距離を設定し、要素を上下に移動するために使用されます。使用法: 1. 長さの値を指定します (「px」、「em」、または「rem」など)。 2. auto: 自動的に上部または下部に配置されます。 3. initial: 初期値にリセットされます。親要素を継承します。

#CSS での top 属性の使用

top 属性とは何ですか?

top プロパティは、親要素の上部を基準とした要素のオフセット距離を設定するために使用されます。要素を上下に移動します。

使用法:

最上位の属性の構文は次のとおりです:

<code>top: <length> | auto | initial | inherit;</code>

その内:

# #: 「px」、「em」、「rem」などの長さの値を指定します。 auto
• : 要素の配置タイプに応じて、要素をその親要素の上部または下部に配置します。
initial
• : 要素の最上位プロパティを初期値にリセットします。
inherit
• : 親要素から最上位の属性値を継承します。

top 属性をいつ使用するか?

top 属性は通常、次の状況で使用されます。

重複する要素の作成

• 要素を垂直方向に整列する
• 垂直メニューの作成またはナビゲーション 列
• ページ上の要素の位置を制御します

例:

次の例は、

< div>

要素は、親要素の上部に対して 50 ピクセル下に移動します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div { top: 50px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>次の例では、

要素が親要素の下部に対して 20% 上に移動します。親要素: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div { top: -20%; }</pre><div class="contentsignin">ログイン後にコピー</div></div>

ヒント:

#top 属性は、要素を上に移動する負の値とともに使用することもできます。

• top プロパティは、要素の位置を正確に制御するために、left、right、bottom などの他の配置プロパティと組み合わせて使用​​されることがよくあります。
• 要素が絶対的に配置されている場合、最上位の属性は最も近い位置にある親要素に対して相対的になります。

以上がCSSでトップを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。