7

overflow-x: hiddenHTMLページの本文に設定すると、position: fixedに設定しても要素が作成される理由を理解しようとしていposition: absoluteます。

このデモでは、効果がよりよく理解されています。

コードは次のとおりです。

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;/* If I remove this line everything is how I expect it to be! */
}

div.page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border: 1px solid red;
  margin-bottom: 200px;
}

div.background {
  background: blue;
  position: absolute;
  width: 100%;
  height: 10%;
}
<div class='background'></div>
<div class='page'></div>
<div class='page'></div>
<div class='page'></div>
<div class='page'></div>

質問

overflow-x: hiddenとポジショニングの関係は何ですか？そのプロパティを設定すると、要素がではposition: fixedなくになるのはなぜposition: absoluteですか？

4

2 に答える 2

26

要素はまだですが、とボックスモデルのposition: absolute間のかなり複雑な相互作用のおかげで、修正されているように見えます。信じられないことに、これらの動作はいずれも指定されていないことや、ブラウザのバグではありません。少し直感に反する場合でも、実際には完全に設計によるものです。positionoverflow

基本的には次のようになります。

  • 絶対的に配置された要素は、その祖先のいずれかが配置されていない限り、最初の包含ブロックに固定されます。（これが、ボディへの追加position: relativeが別の回答で提案されているように機能する理由です。）

  • あなたはwidth: 100%; height: 100%;htmlとbodyの両方を持っています。これにより、最初の包含ブロックがビューポート（表示領域）を超えて拡張されるのを防ぐため、最初の包含ブロックがスクロールすることはありません。

  • 最初の包含ブロックはスクロールしないため、絶対位置にある要素もスクロールしません。これにより、ページの残りの部分がスクロールしても、修正されたように見えます。

奇妙なことに、これはIE6でも機能します。

より長い説明：

  • 絶対的に配置された要素は、その祖先のいずれかが配置されていない限り、最初の包含ブロックに固定されます。

    プロパティの仕様には、ある要素が絶対位置の子孫要素と相互作用しているoverflow場所で観察している同じ問題の別の例が偶然に含まれているため、次のように記述されています。overflow: scroll

    このプロパティは、ブロックコンテナ要素のコンテンツが要素のボックスをオーバーフローしたときにクリップされるかどうかを指定します。これは、要素のビューポートまたは祖先を含むブロックを持つ子孫要素（およびそれぞれのコンテンツと子孫）を除く、要素のすべてのコンテンツのクリッピングに影響します。

    絶対に配置された要素は子孫であり、その包含ブロックは最初の包含ブロック（html要素の包含ブロックでもあります）です。これは、htmlとbodyの両方が配置されていないためです。これは、仕様の別のセクションによるものです。これにより、HTMLと本文のオーバーフロークリッピングが、最初の包含ブロックに固定されているため、絶対位置にある要素に影響を与えるのを防ぎます。

  • あなたはwidth: 100%; height: 100%;htmlとbodyの両方を持っています。これにより、最初の包含ブロックがビューポート（表示領域）を超えて拡張されるのを防ぐため、最初の包含ブロックがスクロールすることはありません。

    次に、仕様には、同じセクションのさらに下に次のように記載されています。

    UAは、ルート要素に設定された「オーバーフロー」プロパティをビューポートに適用する必要があります。ルート要素がHTML「HTML」要素またはXHTML「html」要素であり、その要素が子としてHTML「BODY」要素またはXHTML「body」要素を持っている場合、ユーザーエージェントは代わりに「overflow」プロパティを適用する必要がありますルート要素の値が「visible」の場合、最初のそのような子要素からビューポートまで。ビューポートに使用する場合の「visible」値は、「auto」として解釈する必要があります。値の伝播元の要素には、「visible」の「overflow」に使用される値が必要です。

    もっと簡単に言えば：

    • htmlがそうでない場合はoverflow: visible、代わりにそれをビューポートに適用し、htmlをに変更しoverflow: visibleます。bodyに与えられたoverflow値は影響を受けません。

    • htmlがoverflow: visibleであるが、bodyがそうでない場合は、代わりにそれをビューポートに適用し、bodyを。に変更しoverflow: visibleます。

    （overflow-xまたは要素overflow-y以外に設定すると、省略形はその要素と等しくなくなります。）visibleoverflowvisible

    通常、これは、一度に1つのスクロールバーのみが存在する必要があるため、ビューポートがhtmlおよびbodyとともに自然にスクロールする必要があることを意味します。

    ただし... htmlとbodyの両方に幅と高さを指定し100%ます！つまり、そのコンテナの100％を意味します。bodyのコンテナはhtmlであり、htmlのコンテナは最初の包含ブロックです。ただし、実際にはCSSを使用してビューポートのサイズを制御することはできないため（ブラウザによって完全に処理されます）、2つの要素がビューポートの高さ（折り目とも呼ばれます）の100％に制限されたままになります。ビューポート自体は、表示されるよりも多くのスペースを必要とするコンテンツがないため、折り畳みを超えて拡張する必要はありません（絶対に配置された要素は考慮されないことに注意してください）。したがって、ビューポートはスクロールバーを生成しません（HTMLも生成しません）。表示されるスクロールバーは本体に属しています。

    widthまたはプロパティを設定しなかった場合height、それらはデフォルトでに設定されauto、htmlとbodyの両方がコンテンツとともに拡張され、折り目の下の領域を含む、最初の包含ブロックでカバーされる領域全体と常に同じサイズになります。これにより、本文は常にコンテンツに合わせて拡大するため、本体がスクロールバーを生成するのを防ぎます。したがって、ビューポートスクロールバーのみが表示され、絶対位置にある要素はページの残りの部分と一緒にスクロールします。

  • 最初の包含ブロックはスクロールしないため、絶対位置にある要素もスクロールしません。これにより、ページの残りの部分がスクロールしても、修正されたように見えます。

    スクロールすると、実際にbody要素をスクロールしていることになります。絶対位置の要素は、スクロールしない最初の包含ブロックに固定されているため、スクロールする代わりに固定されているように見えます。

    ちなみに、これは、要素がまったくスクロールしないときにスクロールバーと重なって表示される理由でもあります。スクロールバーは、絶対位置の要素の下にある本体に属します。overflow-xhtmlとbodyからdeclarationまたはwidthand宣言を削除するheightと、表示されるスクロールバーは代わりにビューポートに属します。ただし、bodyを配置すると、スクロールバーは引き続きbodyに属しますが、要素もbodyの子になるため、スクロールバーと重なることはありません。

于 2013-02-06T23:03:47.433 に答える
4

position: relativeに追加する必要がありますbody。あなたdiv.backgroundはposition: absoluteそれを持っています、それはそれがHTMLドキュメントの上部にくっつく原因になっています。それを望まない場合は、その親（この場合はbodyタグ）を指定する必要がありますposition: relative。

デモ＃1：http ://tinkerbin.com/nmI74RpC

position: absoluteまたは、から削除することもできますがdiv.background、それが残りのレイアウトにどのように影響するかはわかりません。

デモ＃2：http ://tinkerbin.com/PP5PpbuC

于 2013-02-05T22:50:31.040 に答える