在图像上浮动Div
杰里米·哈里斯（Jeremy Harris）
我在将div浮动到图像上时遇到问题。这是我要完成的工作：
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
}
.tag {
float: left;
position: relative;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
} <div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>在此图像中：
我希望“功能”框浮动在图像上方，但是相反，它似乎“清除”了浮动并导致图像换行到下一行，就好像它显示为块元素一样。不幸的是，我不知道自己在做什么错。有任何想法吗？
杰里米·哈里斯（Jeremy Harris）
永不失败，一旦我将问题发布到SO，我就会得到启发性的“啊哈”时刻并加以解决。解决方案：
.container {
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;
position: relative;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
}<div class="container">
<div class="tag">Featured</div>
<img src="http://www.placehold.it/200x200">
</div>关键是容器必须相对放置，标签必须绝对放置。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在图像上浮动Div
- 2
窗口大小调整时右上浮动的Div
- 3
在文字上浮动透明PNG
- 4
在Android的ActionBar上浮动ImageView？
- 5
在另一个DIV上浮动一个DIV
- 6
div使用显示网格或flex时，粘性SVG不在div上浮动
- 7
在Google Maps上浮动div，同时保持bootstrap响应能力
- 8
div在图像上的浮动位置
- 9
浮动在 div 内的中心图像
- 10
在图片上浮动文字并做出回应？
- 11
页脚向上浮动到列中
- 12
<header>元素未在右侧导航栏上浮动
- 13
如何在两个方向上浮动ul？
- 14
不在同一行上浮动，如何修复CSS
- 15
强制div除浮动图像外进入其他div
- 16
浮动Div导致裁剪子div /图像溢出
- 17
卡div引导程序4内的浮动图像
- 18
css div没有扩展到适合图像浮动
- 19
将浮动的div宽度包裹在子图像周围
- 20
卡div引导程序4内的浮动图像
- 21
浮动div导致图像在页面中心对齐
- 22
浮动图像溢出了手风琴div
- 23
根据浮动图像的高度垂直对齐div中的文本
- 24
如何使div透明并将其浮动在图像上？
- 25
如何将带有图像的浮动 div 水平居中？
- 26
左上浮两个div，右上浮一个
- 27
如何获取这些时间戳（在html中紧随其后）在同一行上浮动
- 28
为什么右上浮动会影响其下方项目的布局？
- 29
Tinymce如何浮动图像？
我来说两句