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

WBOY
リリース: 2024-01-23 08:56:05
オリジナル
652 人が閲覧しました

これら 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 ピクセルの位置に配置します。

  1. パーセント位置決め

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

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>
ログイン後にコピー

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

  1. オフセット配置

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

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>
ログイン後にコピー

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

  1. カスケード配置

カスケード配置とは、要素の 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 要素を表示します。

  1. 固定位置

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

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>
ログイン後にコピー

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!