0

我有一个元素,我试图将它放在另一个元素之上:

<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。我将如何解决这个问题?

4

5 回答 5

2

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

于 2012-10-03T10:08:50.973 回答
1
#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;

}
于 2012-10-03T10:07:51.917 回答
1

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

(它们都可以有相对定位)

于 2012-10-03T10:15:38.020 回答
0

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

#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/

于 2012-10-03T10:09:38.243 回答
0

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

于 2012-10-03T10:20:45.310 回答