用css怎么让两个层重叠,上部分为白色,下部分为黑色?

时间:2021-10-03 05:29:31
用css怎么让两个层重叠,上部分为白色,下部分为黑色?

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>

#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>
为了便于区分,我把你说的白色换成了红色。

#3


该回复于2011-03-09 10:06:59被版主删除

#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


该回复于2011-03-09 10:13:34被版主删除

#7


绝对定位和相对定位

#8


定位问题,看这里: http://www.blueidea.com/tech/web/2007/4577.asp学习一下就知道了。

#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>

#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>
为了便于区分,我把你说的白色换成了红色。

#3


该回复于2011-03-09 10:06:59被版主删除

#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


该回复于2011-03-09 10:13:34被版主删除

#7


绝对定位和相对定位

#8


定位问题,看这里: http://www.blueidea.com/tech/web/2007/4577.asp学习一下就知道了。

#9


一个加上z-index:1  另一个写z-index:2

#10


就是一个定位就可以了