漂浮在图像上的Div

Question

我在图像上浮动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>

在此图片中：

我希望“精选”框浮动在图像顶部，但它似乎“清除”浮动并导致图像换行到下一行，就像它显示为块元素一样。不幸的是，我无法弄清楚我做错了什么。有什么想法吗？

Answer 1

永远不会失败，一旦我将问题发布到SO，我就会得到一些有启发性的“aha”时刻并弄明白。解决方案：

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

关键是容器必须位于相对，标签位于绝对。

Answer 2

稍微改变你的位置：

.container {
    border: 1px solid #DDDDDD;
    width: 200px;
    height: 200px;
    position:relative;
}
.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: green;
}

<强> jsFiddle example

您需要在容器上设置相对定位，然后在内部标记div上设置绝对值。内部标签的绝对定位将相对于外部相对定位的div。您甚至不需要标记div上的z-index规则。

Answer 3

实际上只是添加margin-bottom：-20px;到标签类修正了它。

http://jsfiddle.net/dChUR/7/

作为块元素，div自然地定义了他们试图不违反的边界。为了使图像层叠，图像旁边没有任何内容，因为它们没有结束标记，你只需强迫它们做他们不想做的事情，比如违反它们的自然界限。

.container {
  border: 1px solid #DDDDDD;
  width: 200px;
  height: 200px;
  }
.tag {
  float: left;
  position: relative;
  left: 0px;
  top: 0px;
  background-color: green;
  z-index: 1000;
  margin-bottom: -20px;
  }

另一个需要做的就是使用图像作为背景来创建div，然后将内容放在任何你喜欢的地方。

<div id="imgContainer" style="
         background-image: url("foo.jpg"); 
         background-repeat: no-repeat; 
         background-size: cover; 
         -webkit-background-size: cover; 
         -mox-background-size: cover; 
         -o-background-size: cover;">
  <div id="theTag">BLAH BLAH BLAH</div>
</div>

Answer 4

你有正确的想法。在我看来，您需要将.tag的{​​{1}}更改为position:relative，并将position:absolute添加到position:relative。

Answer 5

您可以考虑使用相对和绝对位置。

`.container {  
position: relative;  
}  
.tag {     
position: absolute;   
}`  

我已在那里测试过，如果你想让它改变它的位置，可以用它作为它的余量：

top: 20px;
left: 10px;

它将从顶部放置20个像素，从左侧放置10个像素;但如果没有必要，请留下这个。