CSS の位置決めモデルとは何ですか?
測位モデル 2017 年 6 月 8 日 fanbright
css は 6 つの測位モデルをサポートしています
静的
絶対
固定
相対
-
浮いている
-
比較的浮いている
位置を設定します
- position:static; 要素の位置設定をキャンセルし、デフォルト値である static に戻すことができます。要素の位置は、通常のフローに対して一定の距離だけオフセットされます。
- position:absolute; は、通常のフローの位置または最も近い位置にある祖先の位置に対して一定の距離だけ要素をオフセットできます。 element.
- z-index は、ウィンドウに対して一定の距離だけ要素をオフセットできます。値が大きいほど、要素の重なり順が高くなります。
最近配置された祖先要素- 位置を設定する要素に配置された祖先要素がない場合、
<body>は、配置された祖先要素になります。つまり、<body>は、デフォルトの位置要素です。
最近定位祖先元素
如果设定位置的元素没有定位祖先元素,那么
<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
-
position:relative;是一个非常好的创建定位祖先元素的方法,因为它不会离开常规流.使用这种方法,能够创建出既保持常规流又实现绝对定位的布局.
原子显示设定了位置的元素是
原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为overflow:scroll|auto的块级元素也是原子显示的
而没设定位置的静态块级,当发生重叠时,他们的行内内容不会重叠,但是他们的边框和背景会发生重叠,但文字不会.
z-index
适用于所有元素,默认auto
z-index不是全局属性,而是相对于设置了数字值z-index的最近定位祖先元素而定.根元素html会创建根堆叠上下文.每一个指定数字值z-index的设定位置元素都会创建一个本地的局部的堆叠上下文.
静态定位元素按照文档出现顺序从后往前进行堆叠.
设定位置元素忽略文档元素出现顺序,而是根据z-index值由小到大的顺序从后往前堆叠.负值的设定位置元素位于静态定位元素和非设定位置浮动元素之下
一 静态定位模型
position:static;默认是static;
静态元素的开始位置由前一个静态元素的位置确定.静态元素的
尺寸,内边距,边框,和外边距决定了下一个元素的开始位置.相邻元素的垂直外边距会
合并在一起,最终的外边距是两个相邻元素外边距的较大值将左右外边距设置为auto,可以使
已设定尺寸的静态块级元素居中显示.
二 绝对定位模型
position:absolute;
百分数是相对于最近定位祖先元素的尺寸而言,而非父元素的尺寸.将元素的left,right,top,bottom,设置为
auto,可以使它恢复原先在常规流中的位置.与浮动元素不同,绝对元素不会自动排列.不会受其他元素影响,也不会影响别的元素.
如果一个元素的所有子元素都设置为绝对定位,那么它的高度会变为
0,所有它的子元素都离开了常规流.-
如果不存在定位祖先元素,会根据
<body>来定位绝对定位居中,一般元素
div{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; /*left:0;*/ 这两条没用,没有影响 /*right:0;*/ }ログイン後にコピー绝对定位居中,静态行内元素
对于静态行内元素,如em,strong,span等,但是不包括行内可替换元素(input,img,textarea等),使用绝对定位模式absolute时,width和right可以使用为了要居中,需要额外的加上
left:0;和right:0;使margin:0 auto;可以正常的生效.
注意,这里left和right必须是0才行.#em{ position:absolute; width:200px; height:200px; margin:0 auto; border:1px solid blue; left:0; right:0; }ログイン後にコピー
三 固定定位模型
position:fixed;可以将任意元素变为固定位置元素
-
切记:固定定位的元素位置是相对于
position:relative; CSS は、ドキュメント内の要素に対する相対的な配置をサポートしていません。このメソッドを使用すると、配置された祖先要素を作成できます。通常のフローを維持し、絶対的な配置を実現するレイアウト。 🎜🎜窗口而定,而非Atomic Display🎜 位置が設定された要素はAtomic に表示されます。これは、外部要素が存在しないことを意味します。相対配置、絶対配置、および固定配置モードを使用すると、要素を overflow:scroll|auto もアトミックに表示されます🎜🎜🎜🎜 位置を設定する静的ブロックレベルで重複が発生した場合、インラインコンテンツは重複しませんが、境界線と背景は重複しますが、text🎜🎜z-index🎜すべての要素に適用されます。デフォルトは auto🎜
🎜。 🎜🎜z-index はグローバル属性ではなく、最も最近に配置された祖先要素によって設定された数値です。ルート要素 html は、指定された数値を持つ各配置要素を作成します。 value z-index はローカルのローカル スタッキング コンテキストを作成します 🎜🎜🎜🎜 静的に配置された要素 ドキュメントが表示される順序に従って後ろから前にスタックします 🎜🎜🎜🎜 Position 要素を設定すると、ドキュメント要素の順序が無視されます。表示されますが、z-index 値の小さいものから大きいものへの順序に従って後ろから前にスタックされます。 負の値の位置の設定 要素は、静的に配置された要素と配置されていない浮動要素の下に配置されます🎜🎜🎜🎜🎜 model🎜🎜position:static; デフォルトは static;🎜
🎜🎜🎜 静的要素の開始位置は、前の静的要素の位置によって決まります。 、padding、border、およびmargin次の要素の開始位置を決定します 🎜🎜🎜🎜 隣接する要素の垂直方向のマージン。要素は一緒にマージされ、最後のマージンは、隣接する 2 つの要素のマージンの大きい方の値です。🎜🎜🎜🎜左右のマージンを auto に設定します。set sizeのstatic block-level要素を中央に配置できます。🎜🎜🎜🎜🎜 2. 絶対位置決めモデル🎜🎜position:absolute;🎜
🎜🎜🎜パーセンテージは、最後に配置された祖先要素のサイズに相対し、非親要素のコード>サイズは、左、右、を設定します。要素の上部、下部をautoに移動します。これにより、通常のフローで元の位置を復元できます 🎜🎜🎜🎜 フローティング要素とは異なり、絶対要素は自動的に配置されません。他の要素の影響を受けず、他の要素にも影響しません 🎜🎜🎜🎜 要素のすべての子要素が絶対配置に設定されている場合、その高さは0になり、すべての子要素が絶対位置に設定されます。その子要素は通常のフローから外れます 🎜🎜🎜🎜 配置された祖先要素がない場合、<body>の配置に基づきます🎜🎜 絶対的に配置され、中央に配置される一般的な要素rrreee🎜絶対的に配置され中央に配置された静的インライン要素🎜 em、strong、span などの静的インライン要素の場合、インライン置換可能な要素 (input、img、textarea など) は含まれません。絶対配置モードを使用する場合は、width と right を使用して中央に配置する必要があります。
ここで、左と右のは0である必要があることに注意してください。🎜rrreee🎜🎜🎜3つの固定位置モデル🎜🎜position:fixedは、固定になります。 -position 要素 🎜
🎜🎜🎜 覚えておいてください: 固定位置要素の位置はwindowを基準とし、nonは最も近い位置の祖先を基準とします。 `、そして、ページがスクロールしても要素はスクロールしません。🎜 ページに相対的に配置されるため、
最も近くに配置された祖先は必要ありません不需要最近定位祖先设置时最好以top,left来进行偏移定位,当同时设置top,left,bottom,right时,会
优先使用top和left的值,只有当top和left不存在时,bottom和right才会生效
四 相对定位
position:relative;
使用left和top来改变元素位置,left和top默认是auto,auto会使相对定位元素保持在常规流中原有位置.
任何元素都可以设置position:relative;从而其绝对定位的后代元素都可以相对于它进行定位.
五 浮动定位与复位
使用float:left;和float:right;可以使元素离开常规流.
使用float:none;默认是none,可以覆盖元素的其他浮动规则,也可以避免继承浮动
浮动元素不会影响块级框的位置,而只影响行内元素
clear:left;clear:right;clear;both;
任意元素都可以设置为浮动元素,clear适用于表格,块级元素和浮动元素
clear 不适用于
行内,绝对定位或固定定位
最初に使用され、上と左が存在しない場合にのみ、下と右が使用されます。有効になります4 つの相対位置決め
- position:relative;
- 任意の要素は、その絶対的に配置された子孫要素を相対的に配置できるように、 Set Position:relative を実行します
- を使用します。 float:left; および float:right; 要素を通常のフローから外すには、float:none を使用します。これにより、要素の他のフローティング ルールがオーバーライドされ、float の継承が回避されます。浮動要素はブロックレベルのボックスの位置には影響しませんが、インライン要素にのみ影響します
inline、Absolutelypositioned、または Fixedpositioned 要素には適用できません🎜🎜🎜🎜🎜 6 つの相対浮動配置🎜🎜🎜 float を使用すると、一部の要素を浮動要素にし、相対を使用できます。 浮動要素は相対配置に設定されます。相対浮動要素は、浮動要素が存在する通常のフロー内に配置されます。フロー内のオフセット位置を設定するには、 left と top を使用できます。 絶対値と固定値に設定した場合、表示結果は不確かになります。 🎜🎜🎜🎜🎜散乱🎜🎜🎜🎜 CSS では、パラメータ値が 0 の場合、単位を追加しません 🎜🎜🎜🎜 ブラウザは要素のコンテンツをレンダリングする前に、最初にそのフレームをレンダリングします。背景色、次に背景画像、次に境界線、そして最後に、ブラウザーはフレームの上にフレームのコンテンツをレンダリングします🎜🎜🎜以上がCSS の位置決めモデルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
H5互換性の問題を解決する方法
Apr 06, 2025 pm 12:36 PM
H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。
PSグラデーションカラーピッカーの実行方法
Apr 06, 2025 pm 10:09 PM
Gradient color pickers give designers the flexibility to extract and create gradients from images.グラデーションの作成を簡素化し、正確性を確保し、インスピレーションを与え、効率を向上させ、クロスプラットフォームのサポートを提供し、Webサイト、グラフィックデザイン、UI/UXデザイン、デジタルアートなどの幅広いアプリケーションをカバーします。
ブートストラップリストでデフォルトスタイルを削除する方法は？
Apr 07, 2025 am 10:18 AM
ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。
ブートストラップフレームワークを構築する方法
Apr 07, 2025 pm 12:57 PM
ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。
画像センターリングは画像ズームをサポートしますか？
Apr 07, 2025 am 07:42 AM
ブートストラップでの画像の中心とスケーリングを実現する方法：d-flex justify-content-centerを使用して、画像を水平に中央に配置します。項目中心と固定の親要素の高さを使用して、画像を垂直に中央に配置します。幅と高さの属性を使用して画像サイズを制御するか、最大幅と最大高さを使用して最大サイズを制限します。 IMG-FLUIDクラスまたはメディアクエリなどの応答性のある設計メカニズムを使用して、レスポンシブスケーリングを実現します。画像サイズを最適化し、オブジェクトフィット属性を使用してスケーリングを制御し、ベストプラクティスに従ってパフォーマンスと保守性を確保します。
Bootstrapのグリッドシステムを表示する方法
Apr 07, 2025 am 09:48 AM
Bootstrapのメッシュシステムは、コンテナ（コンテナ）、行（行）、およびcol（列）の3つのメインクラスで構成されるレスポンシブレイアウトを迅速に構築するためのルールです。デフォルトでは、12列のグリッドが提供され、各列の幅はCol-MD-などの補助クラスを通じて調整でき、それにより、さまざまな画面サイズのレイアウト最適化を実現できます。オフセットクラスとネストされたメッシュを使用することにより、レイアウトの柔軟性を拡張できます。グリッドシステムを使用する場合は、各要素が正しいネスト構造を持っていることを確認し、パフォーマンスの最適化を検討してページの読み込み速度を改善します。詳細な理解と実践によってのみ、ブートストラップグリッドシステムを習熟させることができます。
ブートストラップナビゲーションバーの設定方法
Apr 07, 2025 pm 01:51 PM
ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）
ブートストラップのレイアウト方法
Apr 07, 2025 pm 02:24 PM
Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。
