絶対位置決めの場合、どのようなパラメータが基準になるのでしょうか？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

絶対位置決めの場合、どのようなパラメータが基準になるのでしょうか？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 23, 2024 am 09:55 AM

絶対位置決め参照パラメータ位置決めパラメータ

絶対位置決めの場合、どのようなパラメータが基準になるのでしょうか？

絶対配置は、フロントエンド開発で一般的に使用されるレイアウト方法であり、指定された位置に要素を正確に配置し、位置を変更することなくページのスクロールに追従します。絶対位置決めを実行する場合、要素を目的の位置に正確に配置できるようにするために、いくつかのパラメーターを参照する必要があります。この記事では、参考として一般的に使用されるパラメーターをいくつか紹介し、具体的なコード例を示します。

1. 左、上、右、下パラメータ

絶対配置では、左、上、右、下を設定することで、要素を含む要素を基準にして要素の左側を指定します。要素のパラメータ、上、右、下オフセット。これらのパラメータは、特定のピクセル値またはパーセンテージ値にすることができます。

コード例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

上記のコードでは、left パラメーターと top パラメーターを 50px に設定することにより、box 要素はコンテナー要素の左上隅から 50px オフセットして配置されます。

2. Z-index パラメータ

ページ上には絶対位置を指定する複数の要素が存在する場合があります。これらの要素が重複する場合、z-index パラメータを使用して、要素の重なり順を制御できます。要素。 z-index 値が大きい要素は前面近くに配置され、他の要素を覆います。

コード例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        z-index: 1;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

上記のコードでは、box1 要素の z-index 値は 1、box2 要素の z-index 値は 2 であるため、box2 要素上の box1 要素をカバーします。

3. 親要素のposition属性を配置する

絶対配置を行う場合、親要素のposition属性に注意する必要があります。配置された親要素に位置属性が設定されていない場合、絶対配置された要素の位置は、ドキュメントの表示領域を基準にして配置されます。位置決めされた親要素に位置属性が設定されている場合、絶対位置決めされた要素の位置は、位置決めされた親要素に対して相対的に配置されます。

コード例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

上記のコードでは、box1 要素と box2 要素の配置親要素はコンテナ要素であるため、box1 要素と box2 要素はコンテナ要素を基準にして配置されます。

絶対配置はフロントエンド開発において非常に一般的なレイアウト手法であり、上記パラメータを参照することで柔軟かつ正確に要素を配置することができます。実際の開発では、必要に応じてこれらのパラメータを柔軟に使用することで、多様なページレイアウトを実現できます。

以上が絶対位置決めの場合、どのようなパラメータが基準になるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか？Apr 23, 2025 am 09:57 AM

まあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。