css - cas3 での div タグの重複に関する問題

Question

プロジェクトの新しいテンプレートに取り組んでいますが、うまくいかないことが 1 つあります。ボックスを別のボックスに重ねて、画面のサイズに関係なくそこにとどまらせたい。これまでのところ、2 つの大きなボックスを配置しましたが、3 つ目 (灰色でマークされている、跳ね返っています。何か提案はありますか? 写真へのリンクを追加しました。誰かが私がやりたいことを理解してくれることを願っています 。http: //folk.uio.no/paulkj/Benoit/csstroubble.jpg

ありがとう！

コード：

body{
    background-color: #2F2727;
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

}
#wrapper{
    text-align:center;
    font-family: Arial;
    font-size: 14px;
}
#header {
    width:900px;
    height:100px;
    margin:50px auto;
    border: 2px solid;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}   

#maincontent{
    position:relative;
    width:900px;
    margin: 20px auto;
    border: 2px solid;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

Answer 1

灰色のボックスには、より高い z-index を設定する必要があります。これを参照してください

http://www.w3schools.com/cssref/pr_pos_z-index.asp

灰色のボックスの位置プロパティも宣言することを忘れないでください。そうしないと、z-index が機能しません。