如何使文本浮动在图像HTML CSS的顶部
生活
我有以下html代码，以使“底部” div浮在图像顶部。我在一排桌子上有3张图片。
<td>
<img src="adele.jpg" alt="Adele">
<div id="bottom">
<h4 class="topText">ALBUM</h4>
<h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
</div>
</td>
这是我的CSS：
#bottom{
position: absolute;
display: inline-block;
bottom: 0px;
left:0px;
}
#positionAnchor {
position: relative;
}
就像您在图像中看到的那样，最上面的图片文本也没有正确地漂浮在图像的顶部。
韦恩
您需要使用position：relative来设置窗口，其中position：absolute将用于顶部，左侧，底部和右侧。
<td >
<div id="positionAnchor">
<img src="adele.jpg" alt="Adele">
<div id="bottom">
<h4 class="topText">ALBUM</h4>
<h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
</div>
</div>
</td>
#bottom{
position: absolute;
display: inline-block;
bottom: 0px;
left: 0px;
}
#positionAnchor {
position: relative;
display: inline-block;
text-align:center;
}
否则，它将基于浏览器屏幕而不是父标记定位。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使文本浮动在HTML / CSS中的图像旁边？
- 2
图像 HTML CSS 旁边的浮动文本
- 3
与顶部图像 CSS 重叠
- 4
如何将html文本放在画布浮动图表的顶部？
- 5
如何将html文本放在画布浮动图表的顶部？
- 6
浮动图像CSS HTML之后的水平居中文本
- 7
CSS图像未触及顶部
- 8
CSS：使图像位于div的顶部
- 9
html css图像始终位于顶部
- 10
CSS隐藏文本的顶部
- 11
如何使用CSS仅显示图像的顶部？
- 12
如何使文本垂直对齐顶部CSS
- 13
如何防止CSS边框浮动到父div的顶部
- 14
浮动广告CSS顶部无法正常工作
- 15
HTML / CSS Css框弄乱了顶部
- 16
<img>顶部的CSS背景图像
- 17
CSS缩放图像始终位于顶部
- 18
在每页CSS顶部插入横幅图像
- 19
CSS：在div顶部垂直对齐文本
- 20
HTML/CSS：在模态框顶部以半圆显示图像
- 21
html CSS垂直列表对齐顶部
- 22
HTML / CSS正文不在页面顶部
- 23
HTML / CSS网页顶部的烦人白条
- 24
如何使用CSS Flexbox实现底部向左浮动和顶部向右浮动？
- 25
如何浮动：顶部？
- 26
CSS如何在图像的底部而不是顶部缩放
- 27
CSS和div，如何固定始终垂直放置在顶部的文本
- 28
CSS - 无论 flexbox 属性如何，文本都在顶部对齐
- 29
css：浮动的导航栏，在触摸顶部时会固定
我来说两句