在做css+div布局是重叠有很多中情况，我给你分析分析
首先看看一个容器套两个字容器的情况，在我们做布局的时候网页中div之间的关系基本都可以简化到这种关系。
代码如下
<!DOCTYPE html><html>
<head>
<title>DIV_TEST</title>
<meta charset="utf-8"/>
<style type="text/css">
div{border: 1px solid #000}
#top1{
width: 200px
}
#top1Sun1{
background-color: aquamarine
width: 150px
}
#top1Sun2{
background-color: bisque
width: 150px
}
</style>
</head>
<body>
<div id="top1">
top1
<div id="top1Sun1">top1Sun1</div>
<div id="top1Sun2">top1Sun2</div>
</div>
</body>
</html>
下面我们来看一下那种方式可能会产生重叠
1、margin为负数的情况
现在我们将top1Suan2的margin-top设置成-10px
可以看到top1Sun2向上偏移了10个像素，因此这中情况是可能产生重叠的。
2、绝对定位
这个不用解释了，肯定可以产生重叠
3、父容器高度不固定，子容器使用float，看看父容器的兄弟容器会不会产生偏移
不使用float的时候是这样的
代码如下
<!DOCTYPE html><html>
<head>
<title>DIV_TEST</title>
<meta charset="utf-8"/>
<style type="text/css">
div{border: 1px solid #000}
#top1{
width: 600px
}
#top1Sun1{
background-color: aquamarine
width: 150px
height: 200px
}
#top1Sun2{
background-color: bisque
width: 150px
height: 200px
margin-top: -10px
}
#top2{
height: 100px
background-color: #eee
}
</style>
</head>
<body>
<div id="top1">
top1
<div id="top1Sun1">top1Sun1</div>
<div id="top1Sun2">top1Sun2</div>
</div>
<div id="top2"></div>
</body>
</html>
现在让top1Sun1、top1Sun2的float都为left
你会发现，top2容器居然和top1发生了重叠
发生这种情况的原因是因为top1我们没有设置固定高度，当他的两个字容器向左浮动时，top1的高度就不会被他的子容器撑开了，这是我们可以选择两个方法给top1提供高度占位，一种是设置固定高度，还有一种是设置top1的overflow为hidden（这种方式会让父容器高度自适应字容器），现在我们把top1的overflow设置为hidden看下效果
布局达到了我们预想的效果（top1Sun2因为设置了margin-top:-10px所以会往上偏移10像素，多出的部分，因为父容器设置了溢出隐藏，所以看不到了）
你这个问题涉及到CSS选择器，你现在设置的是元素选择器:span，你要每个span不同的话，按照你现在的代码，最简单的就是用 ID 选择器就行了，其中，你的 span 的 id 命名必须使用英文字母开头，不能用数字开头，可以换成 id="d1" 这样 ， d1 ,d2 ,d3 ，另外，一个网页中，id 具有唯一性，不要为元素赋予相同的 id ，虽然不会报错，但是后面的不会生效。你的代码改为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span标签和字符实体</title>
<style type="text/css">
#d1{color: red}
#d2{color: #000}
#d3{color: #f0f}
</style>
</head>
<body>
<span id="d1">html中预留字符必须替换成字符实体</span><br>
<span id="d2">html中预留字符必须替换成字符实体</span><br>
<span id="d3">html中预留字符必须替换成字符实体</span><br>
</body>
</html>
'------------------------------
其中，颜色值 RGB 中，其中的两位数字都相同的话，可以简写为一位，#000 相当于 #000000
#f0f 相当于 #ff00ff 。
最后，建议多去 w3school 查查资料：网页链接 ，这里比较全。
1.打开dw软件并创建一个新文档。
2.在dw中，编写以下css样式：<style>.mengsb {width：648pxmargin：0px auto}.jixing1 a {position：relativewidth：320pxmargin：0 0px 0 0float：leftheight：232px}。
3.然后将以下图像添加到正文中，代码为：<body><div class =“mengsb”>。
4.查看实时视图中的最终效果。
5，另外，你可以改变一些参数来实现不同的效果，可以改变背景颜色。
6.最后，看看改变颜色的效果。
