相对定位元素的Z-index？

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

你可以用定位做

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

只需添加位置：相对;每个的样式，这里所说：http://www.w3schools.com/cssref/pr_pos_z-index.asp

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

Answer 5

你可以放置一个DIV其他内部，应用位置：相对于父母和位置：绝对给孩子。孩子会出现在父母的上方并与左上角对齐。