これら 5 つの一般的な絶対位置決め方法をご存知ですか?

一般的な 5 つの絶対位置決め方法、すべて知っていますか?

絶対配置は CSS で一般的に使用される配置方法で、最も近い位置にある祖先要素を基準にして要素を配置できます。この記事では、絶対配置の 5 つの一般的な方法を取り上げ、それぞれの具体的なコード例を示します。

1. 上、右、下、左の配置

最も一般的な絶対配置方法は、top、right、bottom、left 属性を使用して要素を配置することです。これらのプロパティの値を指定することで、親要素を基準とした要素の位置を制御できます。

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">我在右上角</div>
</div>

上記のコードは、2 番目の div 要素を親要素の右上隅、上と右から 10 ピクセルの位置に配置します。

2. パーセント位置決め

特定のピクセル値を使用することに加えて、パーセントを使用して要素を位置決めすることもできます。パーセント位置は、親要素の幅と高さに相対的です。たとえば、50% を使用して要素を水平方向の中央に配置できます。

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>

上記のコードは、2 番目の div 要素をその親要素の水平方向の中央に配置します。

3. オフセット配置

オフセット配置とは、元の位置からのオフセットを指定して要素を配置することです。要素を上または左に移動するには負の値を使用し、要素を下または右に移動するには正の値を使用できます。

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>

上記のコードは、2 番目の div 要素を左上に 20 ピクセル移動します。

4. カスケード配置

カスケード配置とは、要素の z-index 属性を指定して要素の積み重ね順序を制御することを指します。要素の z-index 値が大きいほど、上位に表示されます。

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px; z-index: 1;">我在上面</div>
  <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">我在下面</div>
</div>

上記のコードは、最初の div 要素の上に 2 番目の div 要素を表示します。

5. 固定位置

固定位置とは、要素がブラウザ ウィンドウの位置を基準にして配置されることを意味します。スクロール バーがどのように移動しても、要素はそのまま残ります。固定位置。

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>

上記のコードは、要素をブラウザ ウィンドウの右上隅に固定します。

これら 5 つの一般的な絶対配置方法をマスターすることで、Web ページ内の要素をより柔軟に制御およびレイアウトできるようになります。この記事が CSS 絶対配置の理解と使用に役立つことを願っています。

以上がこれら 5 つの一般的な絶対位置決め方法をご存知ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。