web-dev-qa-db-ja.com

DIVを互いに積み重ねますか？

次のような複数のDIVを積み重ねることは可能ですか？

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

それで、それらすべての内部DIVが同じXおよびY位置を持っているのでしょうか？デフォルトでは、それらはすべて互いに下に移動し、Y位置を最後の直前のDIVの高さだけ増やします。

フロートやディスプレイ、または他のトリックが噛む可能性がありますか？

編集：親DIVには相対位置があるため、絶対位置を使用しても機能しないようです。

csshtmlstackcss-float
97
Tower

必要に応じて外側のdivを配置してから、absoluteを使用して内側のdivを配置します。それらはすべて積み重ねられます。

.inner {
  position: absolute;
}
<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>
141
Matt

デイブの答えに追加するには：

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
46
Eric Wendelin

Divを少しオフセットして、作業中に見えるように配置しました。
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

5
nycynik

文字通り一方を他方の上に、つまり1つを上部に配置することを意味する場合（同じX、Y位置、異なるZ位置）、z-index CSS属性を使用してみてください。これは動作するはずです（未テスト）

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

これにより、3の上部に4が表示され、2の上部に3が表示されます。 Zインデックスが高いほど、要素はZ軸上に配置されます。これがお役に立てば幸いです:)

5
Jimmie Lin

style="position:absolute"

4
Dave Swersky

私はフィドル以下で試したのと同じ要件がありました。

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

0
Raphael

私はこの投稿が少し古いことを知っていますが、私は同じ問題を抱えていて、数時間それを修正しようとしました。最終的に私は解決策を見つけました：

絶対位置に2つのボックスがある場合

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

画面に1つのボックスがあることを期待しています。そのためには、margin-bottomを-heightに設定する必要があります。次のようにします。

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

私にとってはうまくいきます。

0
Krzysztof Jarosz