DIVを互いの上に積み上げますか?


115

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

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

これらすべての内部DIVのX位置とY位置が同じになるようにするには?デフォルトでは、それらはすべて互いに下にあり、直前のDIVの高さだけY位置を増やします。

なんらかのフロートやディスプレイ、または他のトリックが噛み付くような気がします。

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


私の答えを明確にするために、内側のdivを絶対的に配置する必要があります。
マット

回答:


166

外側のdivを好きなように配置してから、絶対を使用して内側の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>


1
動作しないようです。多分私は私がこのシナリオを持っていると述べるべきだった:<div style = "position:absolute ..."> <div style = "position:relative ..."> <div>これをスタック</ div> <div>スタックthis </ div> <div> stack this </ div> <div> stack this </ div> </ div> </ div>
タワー

2
「これをスタックする」というdivを絶対的に配置したいとします。動作します-オリジナルを投稿する前に試しました。クラスセレクターをdivに配置しない場合は、Ericの回答のdiv選択メソッドを適合させて、スタックdivを選択します。
マット

1
私もうまくいきませんでした。あまりにも多くの未知のものが視聴者に残されました。
yan bellavance 2016年

私は位置を使用してスタックに
div

それはディスプレイプロップと関係があるのでしょうか?
yan bellavance 2016年

50

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

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

動作しないようです。たぶん私はこのシナリオがあると言ったはずです:<div style = "position:absolute ..."> <div style = "position:relative ..."> <div>これをスタック</ div> <div>スタックthis </ div> <div> stack this </ div> <div> stack this </ div> </ div> </ div>
タワー

私が考えるような場合には、設定したい「トップ:0;左:0;」"position:relative"を持つdivに。IE6を確実にテストします。ただし、確実に機能するかどうかはわかりません。
エリックウェンデリン

10

文字列の一方を他方の上に置くことを意味する場合は、1つを上部に配置します(X、Y位置は同じですが、Z位置が異なります)、z-indexCSS属性を使用してみてください。これは機能するはずです(テストされていません)

<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

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


4

これで、CSSグリッドを使用してこれを修正できます。

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

そしてこれのCSS:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

0

私はこの投稿が少し古いことを知っていますが、同じ問題があり、数時間修正しようとしました。最後に私は解決策を見つけました:

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

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

#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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.