css は 6 つの測位モデルをサポートしています
静的
絶対
固定
相対
浮いている
比較的浮いている
最近配置された祖先要素
<body> は、配置された祖先要素になります。つまり、<body> は、デフォルトの位置要素です。
最近定位祖先元素如果设定位置的元素没有定位祖先元素,那么<body>就成为定位祖先元素,换言之,<body>是默认设定位置元素.
最近定位元素必须是有效的祖先元素(relative|absolute|fixed),css不支持相对于文档中任意元素进行定位的方法.
原子显示设定了位置的元素是原子显示的,这意味着它的静态后代元素,行内内容和背景之间不可能出现外部元素.通过使用相对定位,绝对定位和固定定位模式,就可以将元素设置为原子显示,设置为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;可以将任意元素变为固定位置元素
切记:固定定位的元素位置是相对于窗口而定,而非
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 つの相対位置決め
inline、Absolutelypositioned、または Fixedpositioned 要素には適用できません🎜🎜🎜🎜🎜 6 つの相対浮動配置🎜🎜🎜 float を使用すると、一部の要素を浮動要素にし、相対を使用できます。 浮動要素は相対配置に設定されます。相対浮動要素は、浮動要素が存在する通常のフロー内に配置されます。フロー内のオフセット位置を設定するには、 left と top を使用できます。 絶対値と固定値に設定した場合、表示結果は不確かになります。 🎜🎜🎜🎜🎜散乱🎜🎜🎜🎜 CSS では、パラメータ値が 0 の場合、単位を追加しません 🎜🎜🎜🎜 ブラウザは要素のコンテンツをレンダリングする前に、最初にそのフレームをレンダリングします。背景色、次に背景画像、次に境界線、そして最後に、ブラウザーはフレームの上にフレームのコンテンツをレンダリングします🎜🎜🎜以上がCSS の位置決めモデルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
