10 个解决方案
#1
<style>
.p1,.p2 {position:absolute;width:200px;height:200px;border:solid 1px;background:black;}
.p2 {left:50px;top:100px;background:white;height:200px;z-index:3}
</style>
<div class=p1>ok</div>
<div class=p2>ok</div>
.p1,.p2 {position:absolute;width:200px;height:200px;border:solid 1px;background:black;}
.p2 {left:50px;top:100px;background:white;height:200px;z-index:3}
</style>
<div class=p1>ok</div>
<div class=p2>ok</div>
#2
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.top1{ width:300px; height:200px; background:#FF0000;}
.top2{ width:300px; height:200px; position:absolute; top:100px; background:#000000;}
</style>
</head>
<body>
<div class="top1"></div>
<div class="top2"></div>
</body>
</html>
为了便于区分,我把你说的白色换成了红色。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.top1{ width:300px; height:200px; background:#FF0000;}
.top2{ width:300px; height:200px; position:absolute; top:100px; background:#000000;}
</style>
</head>
<body>
<div class="top1"></div>
<div class="top2"></div>
</body>
</html>
为了便于区分,我把你说的白色换成了红色。
#3
#4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#div1 {
width:200px;
height:200px;
background:#c33;
}
#div2 {
margin-top:-100px;
width:200px;
height:100px;
background:#33c;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
#5
<!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>无标题文档</title>
<style type="text/css">
.wrap { width:500px; height:300px; margin:0 auto;}
.top { width:500px; height:150px; background:#999;}
.bottom { width:500px; height:150px; background:#FC0;}
</style>
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
#6
#7
绝对定位和相对定位
#9
一个加上z-index:1 另一个写z-index:2
#10
就是一个定位就可以了
#1
<style>
.p1,.p2 {position:absolute;width:200px;height:200px;border:solid 1px;background:black;}
.p2 {left:50px;top:100px;background:white;height:200px;z-index:3}
</style>
<div class=p1>ok</div>
<div class=p2>ok</div>
.p1,.p2 {position:absolute;width:200px;height:200px;border:solid 1px;background:black;}
.p2 {left:50px;top:100px;background:white;height:200px;z-index:3}
</style>
<div class=p1>ok</div>
<div class=p2>ok</div>
#2
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.top1{ width:300px; height:200px; background:#FF0000;}
.top2{ width:300px; height:200px; position:absolute; top:100px; background:#000000;}
</style>
</head>
<body>
<div class="top1"></div>
<div class="top2"></div>
</body>
</html>
为了便于区分,我把你说的白色换成了红色。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.top1{ width:300px; height:200px; background:#FF0000;}
.top2{ width:300px; height:200px; position:absolute; top:100px; background:#000000;}
</style>
</head>
<body>
<div class="top1"></div>
<div class="top2"></div>
</body>
</html>
为了便于区分,我把你说的白色换成了红色。
#3
#4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
#div1 {
width:200px;
height:200px;
background:#c33;
}
#div2 {
margin-top:-100px;
width:200px;
height:100px;
background:#33c;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
#5
<!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>无标题文档</title>
<style type="text/css">
.wrap { width:500px; height:300px; margin:0 auto;}
.top { width:500px; height:150px; background:#999;}
.bottom { width:500px; height:150px; background:#FC0;}
</style>
</head>
<body>
<div class="wrap">
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
#6
#7
绝对定位和相对定位
#8
定位问题,看这里:
http://www.blueidea.com/tech/web/2007/4577.asp学习一下就知道了。
#9
一个加上z-index:1 另一个写z-index:2
#10
就是一个定位就可以了