一道CSS面试题,求解
写一段CSS样式,要求将两个DIV交叉重叠在一起,底下的DIV背景色为黑色,顶上的背景色为白色麻烦各位给一下代码让我学习一些\下...
写一段CSS样式,要求将两个DIV交叉重叠在一起,底下的DIV背景色为黑色,顶上的背景色为白色
麻烦各位给一下代码让我学习一些\下 展开
麻烦各位给一下代码让我学习一些\下 展开
3个回答
展开全部
<!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">
html{ color:#f00;}
#top{width:200px;height:300px; background-color:#fff;position:absolute;top:50px;left:50px;}
#bottom{width:300px;height:400px; background-color:#000; z-index:-100;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="top">上面层</div>
<div id="bottom">下面层</div>
</body>
</html>
可以用z-index来定义层的上下关系
<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">
html{ color:#f00;}
#top{width:200px;height:300px; background-color:#fff;position:absolute;top:50px;left:50px;}
#bottom{width:300px;height:400px; background-color:#000; z-index:-100;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="top">上面层</div>
<div id="bottom">下面层</div>
</body>
</html>
可以用z-index来定义层的上下关系
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="bot"></div>
<div class="top"></div>
css:
.bot{width:200px; height:300px; background:#000;}
.top{width:200px; height:300px; background:#fff; margin-top:-300px;}
<div class="top"></div>
css:
.bot{width:200px; height:300px; background:#000;}
.top{width:200px; height:300px; background:#fff; margin-top:-300px;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
嗯,楼上的方法是其中的一种,利用margin负值方法重叠,下面我就用楼上的代码写第二种:
<div class="bot"></div>
<div class="top"></div>
css:
.bot{width:200px; height:300px; background:#000;position:absolute;}
.top{width:200px; height:300px; background:#fff;}
我这个加了个绝对定位,利用脱离HTML流使其重叠。
————————————————————————
PS：如有路过的朋友请接力，写出其它方法。
<div class="bot"></div>
<div class="top"></div>
css:
.bot{width:200px; height:300px; background:#000;position:absolute;}
.top{width:200px; height:300px; background:#fff;}
我这个加了个绝对定位,利用脱离HTML流使其重叠。
————————————————————————
PS：如有路过的朋友请接力，写出其它方法。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
