ホームページ > 記事 > ウェブフロントエンド > CSSの絶対配置とは何ですか
CSS における絶対配置は、要素の位置をドキュメント フローから独立させる配置方法です。絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロックを基準にして配置されます。デフォルトでは、絶対配置位置はブラウザを基準として、上、右、下、左で配置されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS における絶対配置は、要素の位置をドキュメント フローから独立させる配置方法です。
絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (ドキュメント内の別の要素または最初の要素を含むブロック) に対して相対的に配置されます。デフォルトでは、絶対配置の位置はブラウザを基準にして上、右、下、左で配置されます。
通常のドキュメント フローで要素が元々占めていたスペースは、要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。
絶対位置決め (absolute) について詳しく見てみましょう。実は、絶対位置決め絶対と浮動小数点は部分的に似ており、浮動小数点を理解できれば、絶対位置決め絶対を理解するのに非常に役立ちます。
絶対値と浮動小数点数の類似点から始めましょう: ラップ と 非常に欺瞞的
百聞は一見に如かずと言われます (唯一の違いは、以下の図の p は絶対値を追加することです)
<p style="max-width:90%"> <img src="img/25/1.jpg" / alt="CSSの絶対配置とは何ですか" > </p> <p style="border:4px solid red; position: absolute;"> <img src="img/25/2.jpg" / 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="img/25/1.jpg" / alt="CSSの絶対配置とは何ですか" > </p> <p style="border:4px solid red;"> <img style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > </p>
CSS フローティングフロートの詳しい説明を読んでいただければ、その効果がわかると思います。同じです。しかし、それらの背後にある原理は実際には異なり、まったく同じではありません。テキストを追加すると、これを確認できます。
<p style="max-width:90%"> <img src="img/25/1.jpg" / alt="CSSの絶対配置とは何ですか" > </p> <p style="border:4px solid red;"> <img style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > 我是一个绝对定位的absolute元素 </p>
画像から、テキストが画像で覆われていることは明らかであり、float とは異なります。 float は親要素を欺き、その高さが折りたたまれていると思わせますが、float 要素自体はまだドキュメント フロー内にあり、テキストは float 要素を囲んで隠されません。
しかし、absolute は親要素を騙すものとは見なされなくなり、階層関係を持ちます。通常のドキュメント フローの親要素が死すべきものであると考えると、absolute は不死のものとなり、今日の言葉で言えば、もはや同じ次元には存在しません。親要素から見ると、Absoluteに設定した画像が完全に消えているので、左端からテキストが表示されます。絶対レベルが高いので絵が文字を覆い尽くしています。
まだ戦闘力5のクソ野郎だったCSSに初めて触れたとき、Absoluteに階層の概念があることを知り、完全に理解したつもりになっていたのを覚えています。今思うと、本当にややこしいです(もちろんこれは悪いことではありません。過去の自分が豆腐のようだったと感じるとき、それはあなたが進歩したことを意味します。当時の自分がどうだったかを常に考えてください。それは、あなたがまだ栄光に安住していることを意味します)。
上記の基礎を理解した上で、次のような絶対的性質の特徴も理解する必要があります。
1 回絶対的な要素は階層化されています。最初に生じる疑問は、要素を表示するようにブラウザーにどこで指示するかということです。通常のドキュメント フロー内の要素の場合、ブラウザは親要素、子要素、兄弟要素のサイズと位置に基づいて要素の位置を計算できます。しかし、重ね着した後はどうすればいいでしょうか?基本的な考え方は次のとおりです。
最初のケース: ユーザーは要素に絶対を指定するだけで、左/上/右/下は指定しません。このとき、絶対要素の左上隅のアンカーポイントの位置が、通常のドキュメントフローにおける要素の位置となる。上の図のように、ピクチャ パンダは親要素の最初の子であるため、左上隅のアンカー ポイントは親要素のコンテンツの左上隅になります。
画像パンダとその下のテキストの順序を変更して、それが親要素の 2 番目の子になるようにすると、画像は百聞は一見に如かずです:
<p style="max-width:90%"> 我是一个绝对定位的absolute元素 <img style="max-width:90%" src="img/25/2.jpg" / 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 style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > </p>
只指定right时,元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值:
<p style="max-width:90%"> 我是一个绝对定位的absolute元素 <img style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > </p>
只指定top时,元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值:
<p style="max-width:90%"> 我是一个绝对定位的absolute元素 <img style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > </p>
只指定bottom时,元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值:
<p style="max-width:90%"> 我是一个绝对定位的absolute元素 <img style="max-width:90%" src="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > </p>
通过对left/top/right/bottom的组合设置,由于没有position:static以外的父元素,此时absolute元素可以去任意它想去的地方,天空才是它的极限。
通常我们对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="img/25/2.jpg" / alt="CSSの絶対配置とは何ですか" > <span class="tipIcon">6</span> </p>
这样做效果是OK的,兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式,具体选用哪个方案是见仁见智的。我比较看重的标准:一个是简洁,另一个是尽量让每个属性干其本职工作。
用这两个标准看待上述实现方法,应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移,但父层p并不需要任何位置偏移,之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业,顺便陪客户聊聊天,但纯聊天聊完一个钟,恐怕会被投诉。
(学习视频分享:css视频教程)
以上がCSSの絶対配置とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。