web-dev-qa-db-ja.com

同じサイズの親の上にdivをオーバーレイします

ドラッグアンドドロップイベントの開始時に子divをオーバーレイして、その親divをカバーする必要がありますが、z-indexを使用して子divを親の上に配置することはできません。

これが私のHTMLです：

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

そしてこれが私のCSSです

html, body {
  height: 100%;
  width: 100%;
}

.some-element {
  background-color: blue;
  width: 100%;
}

.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.child-div {
  background-color: green;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

これが私の問題を示すCodePenです： https://codepen.io/leofontes/pen/LkgJpo

Z-indexとpositionrelativeを使用することで、私が望んでいたことを達成できると思いましたが、それは親の上に積み重なっていないようです。何が起こっているのかについて何か考えはありますか？

htmlcsspositionoverlayz-index
7
leofontes

.child-divの場合、位置をabsoluteに変更します。

.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

html,
body {
  height: 100%;
  width: 100%;
}
.some-element {
  background-color: blue;
  width: 100%;
}
.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}
<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

相対配置は、現在の場所から相対的なものを移動しますが、元の場所のスペースを占有し続けます。以下の例を見てください。相対配置を使用して"text"セグメントを移動すると、テキストの行が"Some"と（ "Some"の間の単一のスペースに折りたたまれないことに注意してください。 "ここ。"）==

span {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: yellow;
}
<p>
  Some <span>text</span> here.
</p>

要素を絶対位置に設定すると、通常のドキュメントフローから外れます。つまり、他の絶対的に配置されていない要素に関する限り、それらはスペースを占有しません。これが、絶対配置を使用するときに子要素が親の寸法と一致することを確認するためにheight: 100%; and width: 100%;を使用する必要がある理由です。

デフォルトでは、パディングは100％の寸法に追加されます。これを防ぐには、box-sizing: border-box;を使用します。

height: 100%; and width: 100%;の代わりに、top: 0; right: 0; bottom: 0; left: 0;を使用することもできます。これにより、子要素が親要素の端まで引き伸ばされます。

10
hungerstar