CSSでトップを使う方法-CSSチュートリアル-php.cn

CSSでトップを使う方法

下次还敢

リリース： 2024-04-28 15:36:14

オリジナル

1249 人が閲覧しました

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

CSSでトップを使う方法

#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 属性は、要素を上に移動する負の値とともに使用することもできます。