2016-06-02 13 views
0

いいえ私はウェブサイトデザインを構築しようとしています。私がする必要があるのは、2つの色の背景のdivを持って、それらの前に白いボックスを浮かべることです。私はバックグラウンドブロックにz-index 0を使用し、次にz-index 5をトップに浮かべたいブロックに使いました。私はposition:relativeを使っています。なぜこれが動作しないのか誰にも分かりますか?ここに私のコードです:他のdivに浮動小数点をZ-インデックスで使用できない

HTML:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
</head> 
<body> 
    <div id="page"> 
     <div id="grey_block_left"></div> 
     <div id="purple_block_right"></div> 
     <div id="white_box_outer"> 
      float on top 
     </div> 
     <div id="footer"> 

     </div> 
    </div> 
</body> 
</html> 

CSS:

@charset "utf-8"; 
* 
{ 
    list-style: none; 
    text-decoration:none; 
    padding: 0; 
    margin: 0; 
} 
html 
{ 
    margin: 0 auto; 
    width: 100%; 
    min-width: 320px; 
} 
body 
{ 
    margin: 0; 
    padding: 0; 
} 
#page 
{ 
    width: 100%; 
    position: relative; 
    z-index: 0; 
} 
#grey_block_left 
{ 
    width: 40%; 
    background-color: #333333; 
    min-height: 700px; 
    float: left; 
    position: relative; 
    z-index: 0; 
} 
#purple_block_right 
{ 
    width: 60%; 
    background-color: #9966cc; 
    min-height: 700px; 
    float: left; 
    position: relative; 
    z-index: 0; 
} 
#footer 
{ 
    width: 100%; 
    background-color: #111111; 
    min-height: 250px; 
    float: left; 
    position: relative; 
    z-index: 0; 
} 
#white_box_outer 
{ 
    width: 70%; 
    min-height: 450px; 
    margin-left: 200px; 
    position: relative; 
    z-index: 5; 
    float: left; 
    background-color: #ccc; 
} 
+0

ホワイトボックスが一番上にあります。 – frnt

答えて

1
#white_box_outer 
{ 
width: 70%; 
min-height: 450px; 
margin-left: 200px; 
position: absolute; 
float: left; 
background-color: #ccc; 
} 

絶対にあなたのwhite_box位置を設定し、それはあなたの目標に応じて、高さと幅です調整します。

+0

うん、それは動作します。ありがとう。 Btwなぜこのことをしなければならないのか分かりますか? – Magearlik

+0

はいposition絶対は常にあなたの要素をページの先頭に持ち、後であなたはleft、top .......を使ってそれを整列させることができます。Welcome: - ) – frnt

関連する問題