web-dev-qa-db-ja.com

オーバーフローがz-indexと対話するのはなぜですか？

Z-indexの背後にあるルールと、それがオーバーフロープロパティとどのように相互作用するかを理解しようとしています。

私はこのhtmlを持っています：

<body>
  <div class="cell">
    Here is some text to keep things interesting
    <div class="boxy"></div>
  </div>
</body>

そして、このCSS：

.boxy {
  position: absolute;
  z-index: 9999;
  top:70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  position: relative;

  /* comment these two lines out and the box appears */
  /* or change them both to 'visible' */
  /* changing only one of them to 'visible' does not work */
  overflow-y: auto;
  overflow-x: auto;
}

Zインデックスと位置が設定されているため、シアンのボックスはdiv.cellのサイズを超えていても表示されると予想していました。

ただし、シアンのボックスを表示する唯一の方法は、overflow-xおよび-y行をコメント化することです。

私の質問は次のとおりです。オーバーフローを非表示または自動として保持しながら、シアンボックスを画面に表示するにはどうすればよいですか。しかし、もっと重要なのは、これが起こっている理由を理解することです。ここで適用されるCSSおよびレイアウトルールは何ですか？

私のPlunkrを参照してください。 この例は、もちろん実際に作業しているHTML/CSSの非常に単純化されたバージョンです。

[〜＃〜] edit [〜＃〜]物事を十分に説明しなかったため、以下の回答には多少の混乱があるようです。 2つのオーバーフロー行をコメントアウトすると、シアンのボックスが表示されることがわかります。 .cellの境界の外側に表示されます。なぜこれが起こるのですか？オーバーフローとz-indexを隠したままシアンボックスを表示するにはどうすればよいですか？

cssoverflowz-index
14
Andrew Eisenberg

シアンボックスがoverflow-xとoverflow-yが表示されている場合にのみ表示され、それ以外の場合は表示されない理由は、単にシアンボックスがセルボックスをオーバーフローしているためです。 overflow: visibleは、単に「包含ボックスがオーバーフローしている場合でもこのボックスをペイントする」ことを意味します。セルボックスは、そのpositionが相対的であるため、シアンボックスの包含ブロックです。 overflowのその他の値により、オーバーフローしたコンテンツがビューからクリップされます。ここでは特別なことは何もありません。特に、z-indexは完全に無関係であり、質問のタイトルが暗示するような相互作用はありません（そして、セルに他の要素を注入するスクリプトを心配しない限り、本当にそんなに大きな数に設定する理由はありません。 ）。

セルに目に見えないオーバーフローがある間にシアンのボックスを表示できるようにする唯一の方法は、セルからposition: relativeを削除し、その宣言をセルの親（この例では本文）に適用することです。このような：

body {
  position: relative;
}

.boxy {
  position: absolute;
  z-index: 9999;
  top: 70px;
  width: 50px;
  height: 50px;
  background: #0FF;
}

.cell {
  border: 2px solid #F00;
  overflow: auto;
}
<div class="cell">
  Here is some text to keep things interesting
  <div class="boxy"></div>
</div>
11
BoltClock

絶対配置された要素は、親の次元に寄与しません。

したがって、.cell DIVには寸法に影響するコンテンツがなく、幅が0％で100％になります。

要素を表示するには、DIVを囲む.cellに高さを追加する必要があります。この場合は120px（上部70px +高さ50px）です。

4
Rick Hitchcock

親クラスcellの高さを設定する必要があります。 absolute要素の高さは親に影響しないためです。

 .boxy {
      position: absolute;
      z-index: 9999;
      top:70px;
      width: 50px;
      height: 50px;
      background: #0FF;

    }

    .cell {
      border: 2px solid #F00;
      position: relative;

      /* comment these two lines out and the box appears */
      /* or change them both to 'visible' */
      /* changing only one of them to 'visible' does not work */
      overflow-y: auto;
      overflow-x: auto;
      min-height: 120px; /* height 70px(Top)+50px*/
    }
2
Gautam Jha

あなたの問題

問題は、cellがboxyノードで指定されているときにoverflowを非表示にするcellノードに関連しています。

理由

背後にある理由は、絶対位置を持つboxyはheightのcellに寄与せず、overflowは非表示にするためです。

なぜオーバーフローせずに表示されるのですか？

デフォルトではoverflowはvisibleであり、ブラウザではオーバーフロー機能に対して特別なことは行わず、オーバーフローをレンダリングする必要がある=>はboxyを非表示にしません。

1
gevorg