CSSの絶対配置とは何ですか

CSS における絶対配置は、要素の位置をドキュメント フローから独立させる配置方法です。絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロックを基準にして配置されます。デフォルトでは、絶対配置位置はブラウザを基準として、上、右、下、左で配置されます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS における絶対配置は、要素の位置をドキュメント フローから独立させる配置方法です。

絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (ドキュメント内の別の要素または最初の要素を含むブロック) に対して相対的に配置されます。デフォルトでは、絶対配置の位置はブラウザを基準にして上、右、下、左で配置されます。

通常のドキュメント フローで要素が元々占めていたスペースは、要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。

絶対位置決め (absolute) について詳しく見てみましょう。実は、絶対位置決め絶対と浮動小数点は部分的に似ており、浮動小数点を理解できれば、絶対位置決め絶対を理解するのに非常に役立ちます。

絶対値と浮動小数点数の類似点から始めましょう: ラップ と 非常に欺瞞的

ラップ

百聞は一見に如かずと言われます (唯一の違いは、以下の図の p は絶対値を追加することです)

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSSの絶対配置とは何ですか" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="CSSの絶対配置とは何ですか" >
</p>

絶対値または浮動小数点数を要素に、absolute を追加するのと同じです。それはどういう意味ですか？たとえば、インライン要素のスパンのデフォルトの幅は適応型であり、それに幅を追加すると機能しません。幅を設定するには、spanをdisplay:blockに設定する必要があります。しかし、spanにabsoluteやfloatを付けると、spanの表示属性が自動的にブロックになり、幅を指定できるようになります。したがって、CSS 内でAbsolute/Float と display:block が同時に表示される場合、display:block は冗長な CSS コードです。

高度な欺瞞

上記の例では、画像の外層のpにabsoluteが付加されているため、高度な欺瞞性がうまく反映されていませんが、

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSSの絶対配置とは何ですか" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

CSS フローティングフロートの詳しい説明を読んでいただければ、その効果がわかると思います。同じです。しかし、それらの背後にある原理は実際には異なり、まったく同じではありません。テキストを追加すると、これを確認できます。

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="CSSの絶対配置とは何ですか" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
  我是一个绝对定位的absolute元素
</p>

画像から、テキストが画像で覆われていることは明らかであり、float とは異なります。 float は親要素を欺き、その高さが折りたたまれていると思わせますが、float 要素自体はまだドキュメント フロー内にあり、テキストは float 要素を囲んで隠されません。

しかし、absolute は親要素を騙すものとは見なされなくなり、階層関係を持ちます。通常のドキュメント フローの親要素が死すべきものであると考えると、absolute は不死のものとなり、今日の言葉で言えば、もはや同じ次元には存在しません。親要素から見ると、Absoluteに設定した画像が完全に消えているので、左端からテキストが表示されます。絶対レベルが高いので絵が文字を覆い尽くしています。

まだ戦闘力5のクソ野郎だったCSSに初めて触れたとき、Absoluteに階層の概念があることを知り、完全に理解したつもりになっていたのを覚えています。今思うと、本当にややこしいです（もちろんこれは悪いことではありません。過去の自分が豆腐のようだったと感じるとき、それはあなたが進歩したことを意味します。当時の自分がどうだったかを常に考えてください。それは、あなたがまだ栄光に安住していることを意味します）。

上記の基礎を理解した上で、次のような絶対的性質の特徴も理解する必要があります。

• アンカーポイントの決め方
• 相対的愛殺
• z-index との関係
• 再描画とリフローのオーバーヘッドを削減する

アンカー ポイントの決定方法

1 回絶対的な要素は階層化されています。最初に生じる疑問は、要素を表示するようにブラウザーにどこで指示するかということです。通常のドキュメント フロー内の要素の場合、ブラウザは親要素、子要素、兄弟要素のサイズと位置に基づいて要素の位置を計算できます。しかし、重ね着した後はどうすればいいでしょうか？基本的な考え方は次のとおりです。

最初のケース: ユーザーは要素に絶対を指定するだけで、左/上/右/下は指定しません。このとき、絶対要素の左上隅のアンカーポイントの位置が、通常のドキュメントフローにおける要素の位置となる。上の図のように、ピクチャ パンダは親要素の最初の子であるため、左上隅のアンカー ポイントは親要素のコンテンツの左上隅になります。

画像パンダとその下のテキストの順序を変更して、それが親要素の 2 番目の子になるようにすると、画像は百聞は一見に如かずです:

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="CSSの絶対配置とは何ですか" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="CSSの絶対配置とは何ですか" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

以上がCSSの絶対配置とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。