5

インラインコンテンツの下の部分的な背景としてdivを表示しようとしていますが、そのコンテナの背景の上にあります。部分的な背景だけの z-index を -1 に設定すると、背景の後ろに表示されます。しかし、含まれている div の z-index が -1 であるときに、含まれている div の z-index を 1 に設定すると、必要に応じて表示されます。

なぜこれが信頼できる方法であるかどうか、誰かが私に説明できますか?

.container {
  position: relative;
  width: 80%;
  height: 18px;
  padding: 6px 10px;
  background: #666;
  z-index: 1;
}

.partialbg {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 30px;
  width: 80%;
  background: #0CC;
  z-index: -1;
}
<div class="container">Text here
  <div class="partialbg"></div>
</div>

4

1 に答える 1

7

これが発生する理由は、子と親が存在するためです。z-index親にを設定すると、z-indexが積み上げられているため、子も同じになります。

したがって、親に を設定するz-indexと1、子も になり1ます。

意味がないので、子供が親の後ろにいることは体系的に不可能です。ただし、テキストは子の兄弟です。子にofを設定すると、基本的に子と親の間に影響はありませんが、兄弟が影響を受けるため、子は兄弟の後ろに移動します。z-index-1

于 2013-10-22T16:34:22.657 に答える