css_html/css_WEB-ITnoseの「位置」の詳細

位置の概念とは何ですか?

ねえ、この要素はどうやってそこに行きましたか?

振り返ってみて、「スタイルが壊れている」または「ページにバグがある」と感じるとき、上記の文のように説明できる状況はかなり多くあるでしょうか?

CSSを書くとき、私たちはよく「位置」を考慮します。その考え方は、すべてのページ要素を意図した位置に配置する必要があるということです。結局のところ、計画に従えば、順序立てて間違いを犯す可能性が低くなります。

雑誌の編集者と同じで、原稿がすべて揃ったとしても、どの記事をどのページのどこに掲載するかを慎重に検討しなければなりません。良い雑誌には良いレイアウトが必要です。

以下、この記事では「ポジション」に影響を与えるものの、一般的に知られていないいくつかのポイントを紹介します。

ボックス モデルの再理解

ボックス モデルについてよく理解しておく必要があります:

コンテンツ、パディング、ボーダー、マージン領域の外側では、画像の端に注意してください。ボックス モデルのさまざまな領域を分離するエッジ。ページ要素の正確な配置を決定する際には、これらのエッジを注意深く参照する必要があります。小さいものから大きいものまで、次のとおりです。

• コンテンツ エッジ、インナー エッジとも呼ばれます (JavaScript の innerWidth などとは異なることに注意してください)。これで囲まれた領域はコンテンツ領域を表します。これは通常、要素内の特定のコンテンツによって決まります。決定される範囲はコンテンツ ボックスと呼ばれ、CSS 属性 box-sizing のデフォルト値 content-box の範囲でもあります。

• パディングエッジ。パディングボックスの範囲を決定します。 w3c 仕様ではこの値がボックスサイジングから削除されていますが、これは類推して簡単に理解できます。

• ボーダーエッジ。境界ボックスの範囲を決定します。

• マージンエッジ、アウターエッジとも呼ばれます。マージンボックスの範囲を決定します。 box-sizing にもこの値はありません。

なぜこれらの側面を知る必要があるのでしょうか?配置した位置に要素を配置したいが、取得する要素は点 (物理学における粒子など) ではなく、ボックスであると想像してください。一定のスペースを占める箱の場合、基準となる端がない場合、どのように揃えればよいのか明確にわかりますか?

背景の位置

背景は非常に一般的なスタイルですが、注意していない場所もたくさんあります。

背景は背景画像と背景色に分かれており、グラデーション(CSSグラデーション)も背景画像に属します。このうち、背景画像は背景色の上に位置します。複数の背景が使用される場合、最初に宣言された背景が一番上に表示されます。

background-clip に加えて、background-position、background-size などの他の背景属性は、背景画像にのみ影響し、背景色には影響しません。これは当然のことです。背景色は非常に単純で、開始点と終了点がなく、常にスペース全体を、そこにあるかどうかに関係なく覆っているからです。

さて、要素 div.bg 要素は次の CSS を定義します:

.bg-element{    width: 100px;    height: 100px;    margin: 20px;    padding: 20px;    border: 5px dashed #386365;    background: #2aace9 url(pattern.png) no-repeat;}

これは背景画像と背景色の両方を持ち、内側と外側のマージンと境界線を持つ要素です。 効果は次のとおりです。

デフォルトでは、背景画像の開始点はパディング ボックスの左上隅ですが、背景色には開始点がなく、境界ボックス全体を覆うことがわかります (これを確認するには、破線の境界線は特別に使用されます)。この例の背景画像はパディング ボックスに限定されているように見えますが、実際には、両方とも背景色と同じ表示範囲です。これは、background-position または background-repeat を少し変更することで確認できます。 :

この背景の可視範囲の概念は、CSS3 の新しい属性 background-clip に対応します。この属性のデフォルト値はborder-boxです。変更すると次のようになります:

表示範囲をどのように変更しても、この例の背景画像の開始点はパディング ボックスの左上隅です。 これが の概念です。背景画像の開始点。これはcss3の新しいbackground-originに相当し、デフォルト値はpadding-boxです。背景原点が変更されると、属性背景位置によって生成された位置オフセット (right やbottom などのキーワードを含む) により、それに応じて参照エッジが変更されます。

余白領域には背景はありません。上のボックス モデルの図では、マージンと透明も同じ意味です。

位置決め用に独自のコンテナを設定します

この位置決めの組み合わせを使用する必要があります:position:relative; の親要素と、position:absolute; の子要素。

これは、xy 平面座標系を確立し、必要な座標位置に要素を配置することに似ています。しかし、X 軸、Y 軸、原点、座標点はどこにあるのでしょうか?

この例を見てください:

<div class="pos-container">    <div class="pos-element"></div></div>

.pos-container{    position: relative;    width: 140px;    height: 140px;    margin: 20px;    padding: 20px;    border: 5px dashed #789;}.pos-element{    position: absolute;    width: 70px;    height: 70px;    margin: 10px;    padding: 20px;    border: 5px dashed #a74;    background: #e5c5a5;    left: 0;    top: 0;}

結果は次のとおりです:

境界線は明らかな視覚的な部分であるため、境界線のエッジの位置を決定するのは簡単です。このとき、div.pos 要素の座標は (0, 0)、画像内の間隔は 10px であることに注意してください。分析後、この 10 ピクセルの間隔は div.pos 要素のマージンから来ていることがわかります。それでは、どのような結論が導き出せるでしょうか?結論は以下の通りです

首先，网页的平面坐标系和通常的数学平面直角坐标系不同，y轴的正方向是朝下的。事实上，包括Photoshop、Flash等平面设计在内的界面，都使用这样的坐标系。

这种搭配的情况下，构成坐标系xy轴的是用作容器的元素的padding edge。其中padding edge的左上角即为坐标系的原点。

绝对定位的元素设置的left、top所形成的坐标位置点，位于该元素的margin edge的左上角。也就是，定位元素是用margin edge的左上角这个点来对齐坐标的。

此外，构成定位参考坐标系的是包含块，而不一定是直接父元素。

包含块

包含块（containing block）是css规范的视觉格式化模型（visual formatting model）中的概念，它是一个逻辑的矩形框，用于css的定位及尺寸的计算，并不限制内部元素的位置，可以溢出。它和盒模型的关系可以这样描述：一个DOM元素对应一个盒模型，盒模型的某一条边（这不是固定的）将标明该DOM元素创建的包含块范围。

一般情况下，一个DOM元素的子元素（以及这些子元素的盒模型）以这个DOM元素的content edge作为包含块的边界。

特别地，在这种position: relative;的父元素及position: absolute;的子元素的搭配中，绝对定位的子元素以父元素的padding edge作为自己的包含块的边界。

更具体的包含块的边界判定可以参考W3C的说明。

普通流、浮动与绝对定位的三方纠葛

在确定一个DOM元素的位置时，我们需要考虑它的定位方案（positioning schemes）。一个DOM元素可以选择以下三个方案：

• 普通流（normal flow）。如果你对这个元素什么也没干，那就是它了。

• 浮动（floats）。当元素的float属性设置了left或right后。

• 绝对定位(absolute positioning)。当元素的position属性设置了absolute或fixed后。

如果一个DOM元素既设置了浮动又设置了绝对定位，那么它是绝对定位（float会被重置为none的计算值）。

你也许听说过“脱离文档流”这样的词汇，它在css里是确实存在的概念，原词是out of flow。如果一个元素的定位方案是浮动或绝对定位，又或者这个元素是根元素（root element），就称这个元素是脱离文档流（out of flow）的。

文档流的问题

同一层级的兄弟元素，同时有普通流、浮动、绝对定位这三种定位方案时，它们之间的相互关系是怎样的？

要理清这个相互关系，需要理解脱离文档流具体是什么意思。

css规范中这样描述绝对定位：

In the absolute positioning model, a box is removed from the normal flow entirely and assigned a position with respect to a containing block.

请注意这里的entirely，这是在说，绝对定位是完全脱离文档流的。为什么要强调完全呢？

因为，脱离文档流是一个比较暧昧的概念，还有不完全的。请看浮动的描述：

In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.

前文已经说过，浮动被归类为out of flow，也就是脱离文档流，但这里却提到了先基于文档流取得一次位置，然后再向左或向右移动。所以，浮动不是完全脱离文档流的。

浮动的特性

之前看到过别人的这样一个提问：

对应html代码（css省略）：

<div class="scheme-container">    <div class="scheme-element-normal">normal</div>    <div class="scheme-element-float">float</div></div>

按照传统的“浮动元素是脱离文档流的”的理解，为什么这个右浮动元素只是浮动到了它所在行的右边，而不是整个容器的右上角呢？

答案就是，浮动不是完全脱离文档流的。这有两方面的意思。

一方面，浮动可以影响文档流。你一定见过把一段文字里的某一个图片浮动，来制造文字环绕图片效果的用法：

这些位于文档流内的文字，仍然会为浮动元素留出空间，而并非互不相干。这其实是浮动元素影响行框（line box）的宽度的结果。

另一方面，浮动会受到文档流的影响。规范里列出的浮动元素的精确特性规则中有这样一条：

フローティング ボックスの外側の上部は、ソース ドキュメント内の以前の要素によって生成されたブロックまたはフローティング ボックスの外側の上部よりも高くすることはできません。

ここでの外側の上部は、マージン エッジの上端 (外側のエッジ) です。 ）。つまり、floated 要素は、ソースドキュメントに先行するブロックまたは float 要素 よりも上位に置くことはできません。次々と空間配置を求めるフローティング要素はよく知られていますが、この記事では前にブロック要素がある場合、フローティング要素の上端の位置にも影響を与えることがわかります。

次の例を参照してください:

float 要素の前に他の float 要素がある場合、それらは考慮され、より低い位置に配置される場合があります。では、その前にブロック要素があり、それがより大きな位置を占めていた場合はどうなるでしょうか?上の画像からわかるように、float 要素でもこれが考慮されます。

前回の質問の詳しい解説です。

絶対位置決め

絶対位置決めは、ほとんどの場合、フローティングほど混乱しません。当然のことながら、「ドキュメント フローから完全に分離された」と定義されています。これは、ドキュメント フローとのつながりが非常に弱いことを意味し、位置は通常、含まれるブロックと座標に基づいてのみ決定されます。

ドキュメントフローから完全に分離されていますが、それでもドキュメントフローとは無関係で独立して動作するという意味ではありません。これが意味するのは、この要素がレイアウトに参加する場合、その後の兄弟要素には影響を与えないということです。絶対配置要素は、left や top などの配置属性が auto に設定されている場合でも、ドキュメント フローに基づいて利用可能な計算値を取得します。

3つの間の網羅関係

重複がある場合は、網羅関係を考慮する必要があります。下から上への位置は次のとおりです:

• 負の Z インデックスを持つ配置要素。

• 通常フローの非インライン要素。

• フローティング要素。

• 通常のフローのインライン要素。

• z-index が auto または 0 である要素を配置します。

• 正の Z インデックスを使用して要素を配置します。

結論

要素を意図した位置に安定して保持したい場合は、やるべき宿題がまだたくさんあります。この記事では場所の詳細のみを紹介していますので、この内容で迷っている方の参考になれば幸いです。

(ブログを再編集、元のアドレス: http://acgtofe.com/posts/2015/10/xyz-in-css/)