CSS 絶対位置の深い理解_html/css_WEB-ITnose

× カタログ [1] 定義 [2] 機能 [3] 表示 [4] クリップ [5] オーバーフロー

前の単語

すでに位置決めオフセットとカスケードを導入しており、多数の絶対値が例。絶対位置決めは、相対位置決めや固定位置決めに比べて、実際に使用される頻度が高く、応用範囲が広いためです。この記事では、絶対配置を使用する場合の具体的な詳細を紹介します

定義

要素が絶対配置されると、その要素はドキュメント フローから完全に削除されます。要素は、最も近くに配置された祖先を基準にして配置されます。要素に配置された祖先がない場合、その位置は元の包含ブロック ドキュメントを基準とし、その境界は offset プロパティに従って配置されます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。配置された要素は他の要素のコンテンツに流れ込むことはなく、その逆も同様です。

[注] ドキュメントがスクロール可能な場合、要素は最終的に通常のフローのある部分に対して相対的に配置されるため、絶対的に配置された要素も一緒にスクロールします。

//スクロールバーをスクロールすると、絶対位置の要素は一緒にスクロールすることがわかりますが、固定位置はスクロールしません

特徴

absolute と float の両方で、その BFC 属性をトリガーできます。要素であり、両方ともラッピング プロパティと破壊的プロパティを持っているため、一部のアプリケーション シナリオでは、これら 2 つの属性を置き換えることができます。 float 属性の詳しい説明はこちらに移動します

【1】ラッピング

要素が絶対配置された後、その子孫要素に対して包含ブロックが作成されます。また、絶対配置された要素で幅が設定されていない場合、幅はコンテンツによって拡張されます。

[注意] 浮動包含ブロックは子孫の浮動要素をすべて含むように拡張されますが、絶対配置包含ブロックは子孫の配置要素を含まず、子孫の配置要素の配置親としてのみ機能します

【2】 破壊的

要素が絶対に配置された後、親が高さを設定していない場合、親が他のコンテンツを持たないインライン要素の場合、親の高さは折りたたまれます。親の幅も崩れます

//Parent レベル要素のパディングは 10px、背景色はスカイブルーです

【3】フローティング解除

要素が絶対配置された後、要素の元のフローティング効果が解除されます無効となります

【4】オフセット機能

使用した場合 上、右、下、左の4つのオフセットプロパティで要素の4辺の配置を記述し、要素の高さと幅になります。これらのオフセットによって暗黙的に決定され、要素は引き伸ばされます

offset 属性を使用して絶対位置に配置された要素を引き伸ばします。その内部要素は幅/高さのパーセンテージ値をサポートします。通常、要素の高さのパーセンテージが機能するには、親ウィンドウの高さの値が auto 以外である必要がありますが、コンテナが絶対配置によって拡張される場合は、高さのパーセンテージ値もサポートされます

display

要素が絶対配置されている場合 最後に、要素は表示属性を変更できますが、各ブラウザの解析は一貫性がありません。

【1】IE8+ ブラウザは正常に解析します

【2】Firefox と Safari ブラウザは、display:none に切り替えた場合にのみ再レンダリングされ、相互に切り替えると他の値は無効になります

【3】Chrome ブラウザ表示に切り替えます: インラインの場合、レンダリングは無効です。他の値は、切り替え時に通常どおりレンダリングされます

【4】IE7 ブラウザは、絶対位置にあるすべての要素を inline-block 要素としてレンダリングする場合にのみ再レンダリングされます。

の場合は無効です。 [注] IE7 ブラウザで絶対配置要素が inline-block 要素としてレンダリングされるバグを解決するのは非常に簡単です。絶対配置要素の外側の空の

<div>    <div style="position:absolute"></div></div>

.hide{    position:absolute;    clip: rect(0,0,0,0);}

.box{    width: 100px;    height: 100px;    overflow: auto;}    .in{    width: 100%;    display: inline-block;    height: 200px;    background-color: pink;}.close{    position:absolute;    margin: 0 0 0 -20px;    font-size: 20px;    line-height: 20px;    border: 2px solid;    border-radius: 50%;    cursor:pointer;}

<div class="box">    <div class="in">测试内容</div><!--                  --><span class="close">&times;</span></div>