如何制作简易DIV悬浮框

使用Dreamweaver软件，打开一个已经编辑完成的html页面。

然后打开折叠的body标签，在标签的末尾添加一个DIV

在DIV里面加入一个img标签，src指向images文件夹中的一张图片

这时的div并没有相应的css样式，只处在整个网页的左下角

接下来我们就需要将给其添加一定的css样式，为了简便起见，我的css样式就写在页面的body标签里面了。

首先我们要让这个DIV的position样式为fixed，意为相对于屏幕定位。然后将top设为20pxright也设为20px这样我们的div就固定在相对距离屏幕上方和右方分别20个像素的地方

1、首先需要做的就是创建两个div。

2、创建了div后，需要分别给它们Class属性。

3、接下来，使用css，通过Class属性给它们设置样式。

4、需要给于它们一个宽度与高度，为了便于观察，可以给它们一个边框。

5、接下来，先给不悬浮的div设置样式，给它设置一个背景颜色。

6、接下来设置悬浮起来的div的样式，需要先将其进行绝对定位。设置其position。

7、接下来，设置浮动div的位置，需要使用到的是top与left.具体如下图所示。

8、设置完毕后，返回页面即可看到效果。

---