每次要写html的时候，总把之前很基础的东西忘了，搞得几乎每次都要现场去网上翻资料熟悉回一些基本操作。。。
今天写这篇文章就是想一劳永逸的解决问题，也希望顺便给阅读的网友提供一些帮助。
先看成品：
其实组成要素很简单，一段文字，一张图片。
先上代码，代码非常简单。思路：一个盒子（div）里面装了p标签和图片，通过相对于父级元素的绝对定位来使得图片与文字重叠并设置z-index来调整层次关系。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>作业</title><style type="text/css">*{margin:0;padding:0;} /*“*”代表全部元素的意思，这里的作用的去除网页默认的内外边距*/.bigbox{border-style: solid;height: 1000px;}p{width: 600px;height: 800px; /*设置p标签的形状大小，不然文字会排得很乱*/border-style: solid; /*添加边框样式，最后成品可以删除，在写代码的时候添加会更直观，新手强烈推荐*/margin:0 auto;position: absolute; /*绝对定位，对于其普通流的位置进行定位，就是原本不加绝对定位时的地方*//*绝对定位会使得元素脱离文档流（文档流这里不展开解释*/left: 50px;right: 0; top: 150px;/*这三句是对p的位置进行具体描述*/z-index: 2;/*谁数字大显示在最上层，具体语法百度*/}.magic{display: block;/*img原来是行内元素，需要更改为块元素*//*更改为块元素为的就是让margin起效果*/border-style: solid;width: 600px;height: 800px;margin: 0 auto;margin-top: 50px;z-index: 1;}</style></head><body><div class="bigbox"><p>花开三世 酒酿成了微甜<br>人在梦外之梦 血化成了青藤<br>夜灯扶摇升上空 离人还在等<br>不舍得不再遇见<br>有情的人原来不敢相逢<br>桃花朵朵 只恨瞬间花落<br>八荒相隔 四海再无歌<br>看死生契阔 有传说<br>词句写在你眼底 你只有我<br>时间苦多 只待一语道破<br>若情可得 穷尽了三生三世寻相似轮廓<br>分分合合 不错过<br>忘情三生 遗憾也算有幸<br>昆仑雪化成风 泪变千年玄冰<br>氤氲泉此刻无声 故人还在等<br>不舍得不再相欠<br>有情的人原来不敢相逢<br>桃花朵朵 只恨瞬间花落<br>八荒相隔 四海再无歌<br>看死生契阔 有传说<br>词句写在你眼底 你只有我<br>时间苦多 只待一语道破<br>此情可得<br>穷尽了三生三世寻相似轮廓<br>生生世世 不错过<br>时间苦多 只待一语道破<br>此情可得<br>穷尽了三生三世寻相似轮廓<br>生生世世 缘无因爱有果</p><img src="bg.png" class="magic"></div></body></html>
