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

position: relative; を追加するだけです。ここに記載されているように、各スタイルに: http://www.w3schools.com/cssref/pr_pos_z-index.asp

(両方とも相対位置を持つことができます)

Answer 4

一方のdivをもう一方の内部に配置し、親に対して相対的な位置と子に対して絶対的な位置を適用できます。子は親の上に表示され、左上隅に配置されます。

Answer 5

ポジショニングでできる

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