因为在进行css背景颜色设置时，如果设置的过程中稍有疏忽，一不小心就有可能导致颜色背景的被覆盖。所以在进行操作时必须小心，小心，再小心，严格按照规章制度进行。
主要是图片的定位和div的定位问题。
设图片起点坐标是(0, 0),图片高和宽为100px,则图片右下角坐标为(0, 0)
div起点坐标是(0,0),div高和宽为70px，边框分别为 10，20, 20, 10 。并给div边框上色掩盖背景图部分，则 div可见区域为图片的左上(10,10)到右下（20， 20）
图片上的div.html 文件代码如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>图片上的div</title>
<link href="picanddiv.css" rel="stylesheet">
</head>
<body>
<img src="1.jpg" alt="这是一张关于X的照片">
<div></div>
</body>
</html>
picanddiv.css 文件代码如下：
img {position: absolute /* 用绝对定位控制图片 */
top: 0 /* 设置图片跟顶部距离 */
left: 0 /* 设置图片跟左边距离 */
width: 100px
height: 100px
}
div {
position: absolute /* 用绝对定位控制div */
top: 0 /* 设置div距离顶部距离 */
left: 0 /* 设置div距离左边距离 */
margin: 0
border-top: 10px solid red /* 用div上边框颜色掩盖你不想别人看见部分 */
border-right: 20px solid red/* 用div右边框颜色掩盖你不想别人看见部分 */
border-bottom: 20px solid red/* 用div下边框颜色掩盖你不想别人看见部分 */
border-left: 10px solid red /* 用div左边框颜色掩盖你不想别人看见部分 */
padding: 0
width: 70px /* 设置div宽度 */
height: 70px /* 设置div高度 */
background: rgba(0, 0, 0, 0.5) /* 设置div透明背景，能看见背景 */
}
1、首先我不给div定位来看看两个div在浏览器中是如何显示的，具体的代码如下：
如下图，可以看到两个div在没使用定位的情况下显示的位置，我们可以发现div是个块，自动换行了。
2、相对定位：首先给div2使用相对定位，用position:relative来实现的，具体的代码如下：
可以看到如下图，div2的位置离div1的位置偏移了上边四十个像素，左边四十个像素。
3、绝对定位：现在来看看绝对定位，使得div1和div2能重叠，具体的代码如下：
如下图是不是发现两个div块重叠了，具体的效果如下图。
4、绝对定位：现在我来使得div1的绝对定位边60px，左边60px，看看执行的效果是什么样子呢？具体的代码如下：
可以看到如下图的执行效果，是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。
5、div块加文字P:这里为了说明下个定位相关的知识，我先做如下的模型，具体的代码如下：
如下图可以看到文字在div块中，那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。
6、div和文字：将div块设置成绝对定位，看看文字显示的位置，具体的代码如下：
如下图，是不是发现文字没有在div块中了。
7、div绝对定位下块中的文字：这里我要实现div在绝对定定位下，div以及能在块中，具体的代码如下：
上面相对，下面绝对，具体的显示效果如下图。
