CSS の相対位置と固定位置を理解する_html/css_WEB-ITnose

× 目次 [1] 相対配置 [2] 固定配置

前の単語

一般に、配置要素とは、相対、絶対、固定など、位置が静的ではない要素を指します。絶対位置決めの基礎と応用については以前に詳しく紹介しましたが、このブログでは相対位置決めと固定位置決めの関連知識を整理して紹介します。このメカニズムを使用する場合、位置決めされた要素は offset 属性を使用して移動されます。要素が相対的に配置されると、要素は通常の位置から移動されますが、要素が元々占めていたスペースは消えません。相対的に配置された要素は、すべての子要素を含む新しいブロックを作成します。この包含ブロックは、要素の元の位置に対応します

[注] 相対的に配置された要素で過剰制約の問題が発生した場合、一方の値が他方の値の反対にリセットされます。 bottom は常に -top と等しく、right は常に -left と等しい

特徴

【1】範囲を制限する

一般的に、絶対配置された要素の範囲を制限する場合、その親を基準とした相対配置を設定します。要素、相対的に配置された要素はドキュメント フローから離脱しないため

[注意] 相対的に配置された要素は絶対配置を制限できますが、固定配置はウィンドウに対して相対的に配置されるため、固定配置は制限できません

【2】レベルを昇格する

要素をプロモートしたい場合 ドキュメントの流れから離れたくない場合は、相対配置を使用することをお勧めします

インライン要素

絶対配置要素とは異なり、要素にブロックを持たせることができますレベル要素の属性は、インライン要素に適用した後は相対位置を変更できません。インライン要素の属性にはブロックレベルの要素属性がなく、幅と高さを設定できません。上下のマージンに問題があります。

IE 互換

IE6 ブラウザでは、halayout 配下の要素のマイナスマージンが親要素のマイナスマージンを超えている部分が非表示になります。この問題は、margin negative要素のposition属性値をrelativeに設定することで解決できます。

固定配置

固定配置は、要素がドキュメント フローから完全に削除されますが、固定要素のオフセットはビューポートに対して相対的です。

[注意] IE7 ブラウザは

機能

各ブラウザの表示属性のバグについては、固定配置と絶対配置の多くの機能は似ています。クリップ属性の隠し機能、静的位置ジャンプ、オーバーフロー失敗のパフォーマンスはすべて同じであるため、ここでは詳細を説明しません。

フルスクリーンマスク

ページコンテンツがページコンテナのサイズを超えてスクロールバーが表示される場合、絶対フルスクリーンマスクを使用するとスクロールバー以外の部分が見えなくなります。ルート要素 html の親は document であるため、document の高さはスクロール バー以外の部分を除いた視覚領域、つまりビュー ウィンドウと一致します。

現時点では、全画面マスク効果を実現するには、固定された固定配置のみを使用できます

.page{    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    background-color: pink;    z-index: -1;}    .test{    width: 2000px;    height: 200px;    background-color: lightblue;}

<div class="page" id="page"></div><div class="test"></div>    <button>absolute</button><button>fixed</button>

var btns = document.getElementsByTagName('button');for(var i = 0; i < btns.length; i++){    btns[i].onclick = function(){        page.style.position = this.innerHTML;    }}

// 2 つのボタンをそれぞれクリックし、水平スクロール バーをドラッグして効果を表示します