検索

この記事では主に要素の Position 属性について紹介します。この属性はページ上での要素の配置方法を設定できます。

目次

1. ポジションの概要: ポジションの値と補助属性を紹介します。

2. 位置の位置決め方法: 位置の 4 つの位置決め方法 (絶対、相対、固定、デフォルト) を紹介します。

3. 概要ポジション: 例としてポジションを表示します。

1. はじめに

1.1 説明

Position 属性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場所に表示されます。

1.2 主な値

①absolute: ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。

②relative: 相対的な配置。ドキュメント フローのレイアウトから離脱せず、独自の位置のみを変更し、ドキュメント フローの元の位置に空白領域を残します。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。

③fixed: 固定位置。絶対位置と似ていますが、スクロール バーの移動に応じて位置は変わりません。

④static: デフォルト値。デフォルトのレイアウト。

1.3 補助属性

position 属性は、要素をドキュメント フローから取り出すだけで、この要素を希望の位置に表示したい場合は、次の属性を使用する必要があります (position: static はこれらをサポートしていません)。

①left: 要素の左側に何ピクセル挿入し、要素を右側に移動するかを表します。

②right: 要素の右側に何ピクセル挿入するか、要素を左側に何ピクセル移動するかを示します。

③top: 要素の上に挿入するピクセル数と、要素を下に移動するピクセル数を示します。

④bottom: 要素の下に挿入するピクセル数と、要素を上に移動するピクセル数を示します。

上記の属性の値は負の値になる可能性があります (単位: px)。

2. 位置配置方法

2.1 Position:absolute

2.1.1 説明

ドキュメントフローのレイアウトのうち、残りのスペースを後続の要素で埋めます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。

2.1.2 View

CSS Position 定位属性

2.2 Position:relative

2.2.1 説明

相対位置はドキュメントフローのレイアウトから離脱せず、空白領域を残して独自の位置を変更するだけです。ドキュメント フローの元の位置にあります。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。

2.2.2 View

CSS Position 定位属性

2.3 Position:fixed

2.3.1 説明

絶対位置と同様に固定位置ですが、スクロールバーが移動しても位置は変わりません。

2.3.2 View

CSS Position 定位属性

2.3.3 アプリケーションシナリオ

①ログインボックスオーバーレイ: dzフォーラムのログインなど。

②偽のQQメッセージ広告。

2.4 Position:static

2.4.1 説明

デフォルトの配置。この要素がデフォルトの配置方法であることを示します。

2.4.2 アプリケーションシナリオ

IE6 の特殊な処理。

3. まとめ

3.1 スクロールバーの表示の有無

position属性を含む要素がエッジ要素の場合:

①absoluteとrelative: これら2つの値を含むエッジ要素は、ブラウザはこの要素に縮小されません。表示されている場合は、スクロール バーが表示されます。

②修正: この値を含むエッジ要素の場合、この要素が見えなくなるまでブラウザをズームアウトすると、スクロール バーが表示されなくなります。

3.2 例

3.2.1 表示

CSS Position 定位属性

3.2.2 コード

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>position</title>
    <style>
        p        {
            height: 200px;
            width: 300px;
            border-color: Black;
            border-style: solid;
            border-width: 1px;   
         }
        
         #a        {
            position:absolute;
            left:900px;
            top:150px;
        }
        #b        {
            position:relative;
            left:500px;
            top:100px;
        }
        #c        {
            position:fixed;
            left:970px;
            top:400px;
         }
         #d         {
            position:static;    
            background-color:Window;    
         }

    </style>  <p>    p-a<br>    position:absolute;<br>    绝对定位;脱离文档流,遗留空间由后续元素填充。
  </p>  <p>    p-b<br>    position:relative;<br>    相对定位;不脱离文档流,只改变自身的位置,在文档流原先的位置遗留空白区域。
  </p>  <p>    p-c<br>    position:fixed;<br>    固定定位;固定在页面中,不随浏览器的大小改变而改变位置。
  </p>  <p></p>  <input><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS Position 位置決め属性に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか?Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です!特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか?

@mediaと@supportのクエリをネストできますか?@mediaと@supportのクエリをネストできますか?Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストクイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript(および画像とフォントなど)などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してCSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですデータリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか?名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています(その名前とURLが大好きです!)。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますCloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますNUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境