在CSS中,如果想要在一张图上方或下方
添加文字,我们需要使用绝对定位和z-index
属性。具体步骤如下:
1.为图像和
文字创建父元素
我们需要为图像和
文字各自创建
一个父元素,以便在CSS中控制它们的位置。我们可以使用
一个div元素,给它设置相对定位:
<div class="image-container">
<img src="example.jpg" alt="example">
<p>这是图片的说明文字</p>
</div>
2.设置图像的定位
首先,我们需要给图像设置绝对定位,将它从普通文档流中取出。然后,我们可以使用top和left
属性来设置图像的位置。例如,我们想让图像在父元素中水平居中,可以设置left: 0和right: 0:
.image-container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
3.设置
文字的定位
现在,我们需要给
文字设置绝对定位,让它在图像下方
显示。我们可以使用top和z-index
属性来控制
文字的位置。例如,我们想让
文字距离图像
底部有一定的间隔,可以设置top: 100%和margin-top: 10px:
p {
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
}
完整的CSS
代码如下:
.image-container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
p {
position: absolute;
top: 100%;
margin-top: 10px;
z-index: 1;
}
这样,我们就能够在图像下方
添加文字了。如果想要在图像上方
添加文字,可以将top
属性改为负值。