在图象的浮动Div [英] Floating Div Over An Image

问题描述

我无法在图片上悬浮div。这里是我想要完成的东西： http://jsfiddle.net/dChUR/

I'm having trouble floating a div over an image. Here is a fiddle of what I am trying to accomplish: http://jsfiddle.net/dChUR/

HTML ：

<div class="container">
   <div class="tag">Featured</div>
   <img src="http://www.placehold.it/200x200">
</div>

CSS ：

.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;
}

在此图片中：

>

特色框浮在图像的顶部，但它似乎清除浮动，并导致图像包装到下一行，就像它显示为块元素。不幸的是，我不知道我做错了什么。任何想法？

I want the "Featured" box to float over top of the image but instead it seems to "clear" the float and cause the image to wrap to the next line, as though it was displaying as a block element. Unfortunately, I can't figure out what I am doing wrong. Any ideas?

推荐答案

从不失败，一旦我将问题发布到SO，我得到一些启发出来。解决方案：

Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:

HTML：

<div class="container">
   <div class="tag">Featured</div>
   <img src="http://www.placehold.it/200x200">
</div>

CSS ：

.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;
}

关键是容器必须放置相对 绝对标签。

The key is the container has to be positioned relative and the tag positioned absolute.

这篇关于在图象的浮动Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！