h5の位置の使い方

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 の使用例をいくつか次に示します。

相対位置 (相対):

<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 の最も近い位置にある祖先要素を基準にして配置されます。

2. 固定位置 (固定):

<div style="position: fixed; bottom: 0; right: 0;">
  这是固定定位的元素
</div>

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

3. スティッキー配置 (スティッキー):

<div style="position: sticky; top: 10px;">
  这是粘性定位的元素
</div>

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

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

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