將DIV堆疊在一起？

Question

是否可以堆疊多個 DIV，例如：

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

這樣所有這些內部 DIV 都具有相同的 X 和 Y position？ 默認情況下，它們都是 go 在彼此下方，將 Y position 增加上一個 DIV 的高度。

我覺得某種浮動或展示或其他技巧可能會咬人？

編輯：父 DIV 具有 position 相對值，因此，使用 position 絕對值似乎不起作用。

Answer 1

根據需要定位外部 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>

Answer 2

添加到戴夫的答案：

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

Answer 3

您現在可以使用 CSS Grid 來解決此問題。

<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;
}

Answer 4

如果您的意思是將一個放在另一個的頂部，一個在頂部（相同的 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-index 越高，元素在 z 軸上的位置就越高。 我希望這對你有幫助:)

Answer 5

所有的答案似乎都很舊:) 我更喜歡 CSS 網格以獲得更好的頁面布局（ absolute div 可以被頁面中的其他 div 覆蓋。）

<div class="container">
  <div class="inner" style="background-color: white;"></div>
  <div class="inner" style="background-color: red;"></div>
  <div class="inner" style="background-color: green;"></div>
  <div class="inner" style="background-color: blue;"></div>
  <div class="inner" style="background-color: purple;"></div>
</div>

<style>
.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background-color: yellow;
  /* important part */
  display: grid;
  place-items: center;
  grid-template-areas:
                  "inner-div";
}

.inner {
  height: 100px;
  width: 100px;
  /* important part */
  grid-area: inner-div;
}
</style>

如果您使用 CSS 隱藏紫色 div，您將看到藍色 div 位於頂部。

這是一個工作鏈接

Answer 6

style="position:absolute"

Answer 7

我將 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

Answer 8

我有相同的要求，我在下面的小提琴中嘗試過。

#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

Answer 9

我知道這篇文章有點舊，但我遇到了同樣的問題並試圖修復它幾個小時。 最后我找到了解決方案：

如果我們有 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>

我們確實希望屏幕上有一個盒子。 為此，我們必須將 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>

對我來說很好用。

Answer 10

如果您使用純 html、js、css，那么這個答案對您沒有幫助，但如果您也在使用 PHP 並動態生成內部元素，那么您可能已經有一個 foreach 循環來創建內部元素。

$top = 0; // Initialise top
foreach ($array as $value) {

  echo '<div style="height:25px;top:${top}px;" class="positioned-absolute">Stack Me</div>'; // apply top to element

  $top = $top + 32; // increase value of top.
}
unset($top);

我知道在涉及 CSS 的地方通常不贊成內聯樣式。

在我看來，另一種選擇是為每個內部添加一個獨特的類，並增加最高值，我認為從長遠來看這是不可管理的。 當然，如果您有一小組永遠不會改變的元素，那么是的，唯一的類添加會起作用。

Answer 11

提供position:absolute的答案現已過時。

在當前支持的瀏覽器中，使用 CSS 網格更容易實現相同的目標。 這將確保元素仍然是頁面布局的一部分（使用position:absolute產生的問題。

這是一篇解釋如何實現此目的的博客文章： https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute

這是一個帶有實時示例的代碼筆： https://codepen.io/zelig880/pen/oNdZWNa

快速代碼：

 .container_row{ display: grid; }.layer1, .layer2{ grid-column: 1; grid-row: 1; }.layer1{ color: blue; background: red; animation-direction: reverse; }.layer2{ color: white; background: blue; }.layer1, .layer2 { animation-name: fade; animation-duration: 10s; } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }

 <div class="container_row"> <div class="layer1"> I am the layer behind </div> <div class="layer2"> I am actually on top </div> </div> <div class="container_row"> Yuppi: This line is positioned successfully! This would not have been the case with position:absolute </div>

Answer 12

如果您有與影響其他元素位置相關的問題，您可以這樣做。

<div class="container">
   <div class="behind">1</div>
   <div class="front">2</div>
</div>

<style>
.front {
   position: absolute;
   top: 20vh;
   z-index: 2;
}
</style>