いいえ私はウェブサイトデザインを構築しようとしています。私がする必要があるのは、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;
}
ホワイトボックスが一番上にあります。 – frnt