利用position: relative和absolute来实现实现文字在图片上

经常在一些网站上看到。图片上边有文字。我们可以利用position: relative;和position: absolute;来实现。
以下简单举个例子来说明。

注意:两个div属于从属关系。
<style type="text/css">
.aaa {
position: relative;
}
.aaa .bbb {
padding: 23px 30px 21px 28px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}

</style>

<div class="aaa">
<div><img src="..."></div>
<div class="bbb">ssssss</div>
</div>

Views: 1,011
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注