1. 新建HTML文件
在开始编写CSS代码之前，我们首先需要创建一个HTML文件。可以使用任何文本编辑器，比如Notepad 或Sublime Text等来创建一个新的HTML文件。
2. 创
1. 新建HTML文件
在开始编写CSS代码之前，我们首先需要创建一个HTML文件。可以使用任何文本编辑器，比如Notepad 或Sublime Text等来创建一个新的HTML文件。
2. 创建h1和p标签内容，并插入图片
在HTML文件中，使用
和
标签来创建标题和段落。同时，可以通过![]()
标签插入一张图片。
```html
使用z-index属性将元素放置于另一元素之后
这是一个标题
这是一个段落。
![]()
```
3. 预览效果
在浏览器中打开创建的HTML文件，可以看到标题、段落和图片都已经显示出来了。然而，由于图片的z-index设置为-1，它被放置在其他元素的后面。
4. 设置图片绝对位置
为了将图片放置在指定的位置，我们使用CSS的position属性将其设置为绝对定位。通过top和left属性，可以控制图片相对于文档的位置。
```css
img {
position: absolute;
top: 50px;
left: 50px;
z-index: -1;
}
```
5. 预览效果
刷新浏览器页面，可以看到图片已经按照设置的位置进行了调整。
6. 将图片置于文字下面
要想将图片置于文字下方，我们需要将图片的z-index属性设置为一个大于0的值，确保它比其他元素的z-index值更高。
```css
img {
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
```
7. 预览效果
再次刷新浏览器页面，现在可以看到图片已经被放置在文字的下方。
通过以上步骤，我们成功地使用CSS的z-index属性将一个元素放置于另一个元素之后。这种技术可以用于创建各种层叠效果，使网页更加丰富和吸引人。
