Div 在彼此之上 css

Question

我想將 div 1 放在 div 2 的頂部，但這不起作用

    .div1, div2 {
  width:100px;
  height:100px;
  float:left;
}
.div1{

  left:-50px;

  position:relative;
    z-index:-1;
}
.div2{
  left:-50px;
  z-index:1;
  position:relative;
}

Answer 1

如果您的藍色框首先出現在 HTML 中，則將 bluebox 的左側更改為 px，將 redbox 的左側更改為 -204px。 如果紅色框首先出現在 HTML 中，則將紅色框的左側更改為 0px，將藍色框的左側更改為 -204px。

（額外的 4 像素用於兩側的 2 像素邊框。）

使用 Myles 的 JSFiddle，這里是位置的演示：相對解決方案： JSFiddle

Answer 2

盡量避免負z-index值，

嘗試使用z-index:1上.bluebox和z-index:2上.redbox

干得好：

現場演示

絕對定位和 z-index 的巧妙結合:)

Answer 3

在您的示例中，框不重疊，因為它們彼此相鄰浮動，然后將它們都向左移動 100 像素。 嘗試只將紅色框向左移動，然后如果您希望它位於頂部，則為藍色框設置更高的z-index 。 z-index是堆疊順序，其中編號較小的元素出現在編號較大的元素下方。 Mozilla 開發者網絡有關於這個主題的很好的信息。

稍微調整一下，這對我來說很好用： http : //jsfiddle.net/mlms13/ZGJXt/2/

Answer 4

如果你想要頂部的藍色框，你必須給它一個更高的 z-index 值。 現在它更低。

但這並不重要，因為您將它們都浮動並留有邊距，這樣它們實際上就不會重疊。

嘗試給紅色框margin-left: -200px並給藍色框z-index: 10 。