1、打开DreamWeaver软件，新建一个html文件
2、建立html文件后，然后按ctrl+s保存
3、在body中输入标签<div></div>
4、div中插入图片img标签，<img src="" alt="">；如下图所示
5、在链接src中输入链接图片的地址，然后按F12浏览器中预览，如果图片在预览中不能正常显示，检查代码是否错误
6、然后输入文字标签，任何文字标签都可以 p标签 h1-h6或span标签等；在文字标签中输入文字，在浏览器中预览效果
7、然后在上方的head中写入style样式标签，开始对内容添加修饰；对div添加相对定位
8、然后对div中的h1标签添加绝对定位；在定位中添加位置的代码为：top /le酆璁冻嘌ft/bottom/right；唁昼囫缍这里left:20px;top:20px;意思是距离左侧20像素，距离上面20像素；浏览器中预览效果如图所示，现在文字已经定位在了图片上方
9、还可以对文字添加颜色设置，代码为[color:]; color:后面为颜色；比如字体颜色为白色为 color:white;
10、最后整体移动图片和文字，文字在图片的位置不改变；就只需改变整个div的位置即可；如图所示，只改变div的位置关系。
