在不同的z索引层上存在浮点位置问题

时间:2014-09-27 19:47:11

标签: html css position z-index

我希望:

  • 绿色框左侧的白色框;
  • 紫色的盒子填满了剩下的绿色。

尝试清理等但没有任何效果,也许我没有做好。

我还是初学者,所以代码可能不干净也没有正确格式化。



@charset "utf-8";

body {
	background-color: #6CF;
	padding: 0;
	margin: 0;
	overflow-y: scroll;
	font-family: Arial;
	font-size: 18px;
}

#upper {
	height: 404px;
	width: 381px;
	margin: 0 auto;
	top: 0px;
	float: left;
	z-index: 2;
}

#wrapper {
	margin: 0 auto;
	width: 900px;
	height: 700px;
	background-color: #C00;
	z-index: 1;
}

#header {
	height:180px;
	background-color: #FC0;
}

#menu {
	height: 36px;
	background-color: #3C0;
}

#break {
	float: left;
	height: 100%;
	width: 100px;
	background-color: #FFF;
}

#menu2 {
	width: 200px;
	float: left;
	height: 100%;
	background-color: #909;
}

#text {
	
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href = "styles/styles3.css" type = "text/css" rel = "stylesheet" />
</head>

<body>
<div id = "upper"></div>
<div id = "wrapper">
	<div id = "header"></div>
    <div id = "menu">
    	<div id = "break"></div>
        <div id = "menu2"></div>
    </div>
    <div id = "text"></div>
</div>
</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案