h5の位置の使い方

尊渡假赌尊渡假赌尊渡假赌
リリース: 2023-12-26 13:39:05
オリジナル
810 人が閲覧しました

H5 でposition 属性を使用すると、CSS を通じて要素の配置方法を制御できます: 1. 相対配置、相対的な配置、構文は "style="position:relative;"; 2. 絶対配置、絶対的な構文は次のとおりです。 "style ="position: ABS;"; 3. 固定位置、構文は "style="position:fixed;" などです。チュートリアル オペレーティング システム : Windows 10 システム、Dell G3 コンピューター

H5 (HTML5) では、position 属性を使用して、CSS を通じて要素の位置を制御できます。H5 でのposition の使用例をいくつか次に示します。

h5の位置の使い方

相対位置 (相対):

<div style="position: relative; top: 10px; left: 20px;">
  这是相对定位的元素
</div>
ログイン後にコピー

上記のコードの div 要素は、通常のドキュメント フロー位置に対して下に 10 ピクセル、右に 20 ピクセルオフセットされます。

  1. 絶対配置 (絶対):
<div style="position: absolute; top: 50px; right: 0;">
  这是绝对定位的元素
</div>
ログイン後にコピー

上記のコードの div 要素は、上から 50 ピクセル、0 の最も近い位置にある祖先要素を基準にして配置されます。

  1. 固定位置 (固定):
<div style="position: fixed; bottom: 0; right: 0;">
  这是固定定位的元素
</div>
ログイン後にコピー

上記のコードの div 要素は、ブラウザ ウィンドウを基準にして配置され、常に残ります。ページの下部と右側。

  1. スティッキー配置 (スティッキー):
<div style="position: sticky; top: 10px;">
  这是粘性定位的元素
</div>
ログイン後にコピー

上記のコードの div 要素は、ページの上部から 10 ピクセルの範囲になります。ユーザーのビューポートの相対位置は、しきい値より前に維持され、その後は固定位置になります。

    position 属性と対応する位置属性 (上、右、下、左など) を設定することで、さまざまな要素の位置効果を実現できます。 H5 で実現されます。必ず CSS コードをスタイル タグ内または外部スタイル シートに配置して、ページ全体で有効になるようにします。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート