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 to child。孩子将出现在父母之上并与左上角对齐。

相对定位元素的Z指数？

5 个答案: