AbsoluteとRelative
2861 ワード
週末をかけてcss-postionの標準を一度読んで、AbsoluteとRelativeについての部分の理解をここに記録します.
cssには、3つの位置決めスキームがあります. Normal flow Floats Absolute positioning
Normal flowは最も一般的なBFCとIFCであり、つまりよく言われるブロックレベル要素が上から下、インライン要素が左から右にレイアウトされている場合である.Floatsはよくある箱の水平配置の場合です.Absolute positioningは箱をNormal flowから完全に離脱させ,top,leftなどの属性を設定することでpositionを決定する.
注意:ここではFloatsとAbsoluteは
1つの要素の箱の位置と大きさは通常、1つの特定の矩形から計算され、この特定の矩形は要素の 最近の祖先要素がブロックレベル要素である場合、 最近の祖先要素がインラインレベル要素である場合、 祖先要素がない場合、または祖先要素が
注意:上記の3つ目の点では、
相対位置:自己位置に対する位置です.
1つの要素のposition属性に
彼女がcssを勉強しているので、私がそばで指導する必要がありますが、cssはずっと私の弱点なので、私は週末にcss-positionの基準を整理して、このように指導しても底気があります.この文章は基本的に以下の参考になるリンクのメモですが、私が前にこの部分の内容を学んだとき、ネットで探していた他の人のブログから見たもので、標準と出入りするところがたくさんあって、この日も多くの疑問を解きました.学びたい学生がいるなら、css-positonの草案を直接見たほうが頼りになりますし、草案にはexampleも少なくありません.
ドラフト
Positioning schemes
cssには、3つの位置決めスキームがあります.
Normal flowは最も一般的なBFCとIFCであり、つまりよく言われるブロックレベル要素が上から下、インライン要素が左から右にレイアウトされている場合である.Floatsはよくある箱の水平配置の場合です.Absolute positioningは箱をNormal flowから完全に離脱させ,top,leftなどの属性を設定することでpositionを決定する.
注意:ここではFloatsとAbsoluteは
out-of-flowで、Relativeは言っていません.私は多くの文章を見て、Relativeも箱を流れから離れたと言っています.間違った言い方です(私はその害を受けています).Containing Blocks
1つの要素の箱の位置と大きさは通常、1つの特定の矩形から計算され、この特定の矩形は要素の
containing blockである.staticおよびrelativeの要素の場合、そのcontaining blockは通常の箱と同じであり、一般にはその最近の親要素(nearest ancestor)を含むことを指す.fixed(今回の記事ではなく、表を押さない)とabsoluteについては、次のような表現があります.containing blockは、最近のpositonがstaticに等しくない祖先要素によって作成されます.containing blockは箱の内側余白層(padding edge)によって作成される.containing blockは、書き込みモードのdirection属性によって決定される.このような状況は比較的少ないので,分析しない.positionをstatic以外の値に設定していない場合、containing blockはinitial containing blockである.注意:上記の3つ目の点では、
initial containing blockはbodyではありません.多くの文章を見て、ここをbodyと言っています.Relative positioning
相対位置:自己位置に対する位置です.
normal flowでは、要素のサイズは変更されず、topなどの属性を設定することによって、要素の自身に対する位置が変更される.したがって、relativeの要素は、他の要素と重なる可能性がありますが、その後の要素の位置には影響しません.相対的に位置決めされたボックスは、子孫ノードに新しい絶対位置決めされたcontaining blockを作成します.Absolute positioning
position： absoluteおよびposition： fixedの両方について、Absolute positioningを指す.本明細書では、position: absoluteについてのみ議論する.Absolute positioningは絶対位置決めと呼ばれる.絶対位置決め要素は、そのcontaining blockに基づいて決定され、normal flowから完全に離れ、後続の兄弟ノードのレイアウトに影響を及ぼさない.絶対位置決めボックスは、子孫ノードのために新しい絶対位置決めcontaining blockを作成し、子ノードのためにnormal flowを作成するcontaining blockを作成します.top, right, bottom, left
1つの要素のposition属性に
staticを除く値が設定されると、この要素の位置はtop, right, bottom, leftの4つの物理的属性によって決定することができる.なお、left、rightまたはbottom、topを同時に設定すると競合する場合があります.の最後の部分
彼女がcssを勉強しているので、私がそばで指導する必要がありますが、cssはずっと私の弱点なので、私は週末にcss-positionの基準を整理して、このように指導しても底気があります.この文章は基本的に以下の参考になるリンクのメモですが、私が前にこの部分の内容を学んだとき、ネットで探していた他の人のブログから見たもので、標準と出入りするところがたくさんあって、この日も多くの疑問を解きました.学びたい学生がいるなら、css-positonの草案を直接見たほうが頼りになりますし、草案にはexampleも少なくありません.
参照先:
ドラフト