CSS についてどのくらい知っていますか (11)--position_html/css_WEB-ITnose

1. はじめに

この記事では、ポジションを紹介する記事を使用します。ポジションを学ぶ前に、どのような状況でポジショニングが必要になるのかを考えてみましょう。ポジショニングがなければ、どのようなニーズが満たされないのでしょうか?私たちは、人間が生み出したあらゆる知識には用途があり、以前に遭遇したいくつかの問題を解決する必要があることを知らなければなりません。

位置決めがない場合、作成した Web ページはブラウザ上で上から下、左から右に段階的に並べて表示され、さらにマージンとパディングによって間隔を調整し、float を使用して特定の要素をフローティングします。今では非常に低いように見えますが、N 年前には Yahoo などの単純な Web ページをいくつか作成するのに十分でした。

しかし、場合によっては、この段階的な Web ページのレイアウトでは要件を満たせない場合があります。Web ページ上に特定の要素が出てきて浮くようにする必要があり、その位置を指定する必要があります。このとき、ポジションを使用する必要があり、それは絶対に必要です。以下に示すように:

2.relative

情報によると、position には static/relative/absolute/fixed の合計 4 つのオプション属性があります。このうち、static (静的位置決め) はデフォルト値です。つまり、すべての要素に他の位置値が設定されていない場合、その位置値は静的であり、それがない場合と同じになります。これ以上の紹介はありません。

相対的な配置相対は、例を使って簡単に説明できます。たとえば、「4

」と書けば、誰もが見なくてもそれがどのようなものであるかを知ることができます。

在 次に、3 番目の & lt; Position: Relative を追加し、左と上の値を設定して、何が変化するかを確認します。

上の図では、2 つの情報が認識できるはずです (ほとんどの人は 2 番目の情報を無視すると思います)

3 番目の

は位置を変更し、右下に移動しています。 10px;

他の 3 つの

の位置も変更されていません。

したがって、relative は、他の要素の位置やサイズの変更に影響を与えることなく、それ自体の位置を相対的に変更します。これは相対性の重要なポイントの 1 つです。 2 番目の重要な点は、relative が新しい位置決めコンテキストを生成するということです。以下に位置決めコンテキストの詳細な紹介があります。ここでは、最初に例を通して違いを示します。以下の写真に説明がございます。

3. 絶対的なもの

絶対的なものについては、インストラクターが徹底的に説明したビデオチュートリアルをご覧になることをお勧めします。この記事の内容の一部もこのチュートリアルに基づいています。

話に戻りますが、前の例で最初に基本的なページを作成しましょう?? 4

次に、3 番目の

を絶対に変更します。

上記の結果から、いくつかの情報がわかります:

絶対要素が文書構造の外にあります。相対とは異なり、他の 3 つの要素の位置が再配置されます。要素がドキュメント構造から切り離されると、それは破壊的なものとなり、親要素が崩壊します。 (この時点で、float 要素も文書構造から分離されることをすぐに思い出すことができるはずです)

absolute 要素には「ラッピング プロパティ」があります。以前は、

の幅が画面全体に表示されていましたが、現在は

の幅がコンテンツの幅と同じになります。

絶対的な要素には「追従性」があります。絶対要素は文書構造から切り離されていますが、この時点ではtopとleftの値を設定していないため、その位置は変更されず、元の位置のままです。
絶対要素はページの上にフロートし、下のページ コンテンツをブロックします。
3. 最後に、絶対要素の上部と左の値を設定することで、日常生活でよく使用される内容をカスタマイズできます。ここで注意する必要があるのは、top と left の値が設定されている場合、要素はブラウザーを基準とするのではなく、最も近い配置コンテキストを基準にして配置されるということです。コンテキストの位置付けについては、後ですぐに説明します。
4. ただし、上部と左の値を設定することが、位置決めの最適な解決策ではない場合があります。たとえば、要素 A を要素 B のすぐ上に配置したい場合は、要素 B を絶対値に設定してから、B のマージン値を調整します。これはより効率的です。以下に示すように:

上記の情報を拡張すると、多くの内容が含まれるため、テキストで説明するのは困難ですが、MOOC.com のビデオチュートリアルを視聴することをお勧めします。とても興味深いです。

最後に豆知識をいくつか触れておきます。

1. Absolute を設定すると、インライン要素が「ブロック」されます。これは、前のセクションで表示するときにすでに説明しました。
2. Absolute を設定すると、要素の既存のフロートが無効になります。ただし、float とAbsolute が同時に使用されることはほとんどありません。
3. 上で述べたように、Absolute はページ上で要素をフローティングにします。その場合、どのようにレベルを決定すればよいでしょうか。答えは、「最後のものが最初に来る」です

4. 固定

実際、固定と絶対は同じです。唯一の違いは、絶対要素は最も近い配置コンテキストに基づいてその位置を決定するのに対し、固定は常にその位置を決定することです。ブラウザに基づいて。

「コンテキストの位置付け」については上で何度も言及されていますが、正確には何でしょうか?答えはすぐに明らかになるでしょう。

5. コンテキストの位置決め

5.1 相対的な位置決め

相対要素の位置決めは常に要素自体の位置を基準とし、他の要素とは何の関係も持た​​ず、他の要素にも影響を与えません。

5.2 固定配置

固定要素の配置は常にブラウザの境界を基準としており、他の要素とは何の関係もありません。しかし、それは破壊的であり、他の要素の位置の変化を引き起こします。

5.3 絶対値の位置付け

絶対値の位置付けは、最初の 2 つよりもはるかに複雑です。上と左が絶対に設定されている場合、ブラウザは垂直と水平のオフセットをどのように決定しますか?答えは、ブラウザは要素のすべての親要素を再帰的に検索し、位置が相対/絶対/固定である場合、その要素に基づいて配置されます。見つからない場合は、その要素に基づいて配置されます。ブラウザの境界。次の 2 つの図に示すように:

上の図の「あるレイヤーの祖先要素」は、絶対要素の配置コンテキストです。さて、皆さんは上で述べた絵を理解できるでしょうか？それでも理解できない場合は、私にメッセージを残していただけます。

6. まとめ

ポジションはこのシリーズで最も書くのが難しいと感じています。 したがって、ポジションはCSSの重要な知識でもあります。フロントエンド開発者は立場を理解していないので、できるだけ早くそれを補う必要があります。

ここまで書いてきましたが、まだあまり包括的または体系的ではないと感じていますので、皆さんからフィードバックをいただければ幸いです。このブログ シリーズはこのチュートリアルの最初のバージョンであり、後で時間をかけてビデオ バージョンを録画する予定です。より包括的で体系的なものになることを願っています。

------------------------------------------------ -------------------------------------------------- -----------

私のチュートリアルへようこそ: 「デザインからパターンまで」「 JavaScript プロトタイプとクロージャ シリーズの深い理解」「Microsoft petshop4.0 ソース コード解釈ビデオ」 ""json2 .js ソース コード解釈ビデオ》

私のオープンソース プロジェクトのフォローも歓迎します??wangEditor、シンプルで使いやすい Web リッチ テキスト エディター

---------- -------- -------------------------------------- -------- --------------------------------------