相對定位元素的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其他內部，應用位置：相對於父母和位置：絕對給孩子。孩子會出現在父母的上方並與左上角對齊。