html - 相对定位元素的 Z 索引？

Question

我有一个元素，我试图将它放在另一个元素之上：

<div id="foo1"></div>
<div id="foo2"></div>

这个CSS：

#foo1 {
  width: 600px;
  height: 300px;
  margin: 0;
}
#foo2 {
  width: 600px;
  height: 300px;
  margin-top: -300px;
}

但现在#foo2正在往下走#foo1。我将如何解决这个问题？

Answer 1

使它们成为绝对而不是相对就可以了。

Answer 2

#foo1 {
  width: 600px;
  height: 300px;
  margin: 0;
  position:absolute;
  z-index:100;
}
#foo2 {
  width: 600px;
  height: 300px;
  margin-top: -300px;
  position:absolute;
  z-index:1000;

}

Answer 3

只需添加位置：相对；到每种样式，如此处所述：http: //www.w3schools.com/cssref/pr_pos_z-index.asp

（它们都可以有相对定位）

Answer 4

你可以通过定位来做到这一点

#foo1 {
  width: 600px;
  height: 300px;
 background-color:red;position:relative
}
#foo2 {
  width: 600px;
  height: 300px;
 background-color:green; position:absolute; top:0; left:0
}​

在这里演示http://jsfiddle.net/fckrA/1/

Answer 5

您可以将一个 div 放在另一个 div 中，然后将 position: relative to parent 和 position: absolute 应用于 child。子级将出现在父级上方并与左上角对齐。