59

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

在这张图片中：

在此处输入图像描述

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

4

5 回答 5

136

永远不会失败，一旦我将问题发布给 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>

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

于 2013-08-20T15:56:53.840 回答
20

稍微改变一下你的定位：

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

jsFiddle 示例

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

于 2013-08-20T15:54:27.777 回答
6

实际上只是添加 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>
于 2013-08-20T18:04:29.140 回答
2

你有正确的想法。在我看来，您只需要更改为.tag，然后添加到。position:relativeposition:absoluteposition:relative.container

于 2013-08-20T15:54:41.070 回答
1

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

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

我已经在那里测试过了，如果你想让它改变它的位置，也可以使用它作为它的边距：

top: 20px;
left: 10px;

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

于 2013-08-20T16:08:10.440 回答