在图像上浮动 div答案

【问题标题】：Floating Div Over An Image在图像上浮动 div
【发布时间】：2013-08-22 18:28:28
【问题描述】：

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

在这张图片中：

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

【问题讨论】：

jsfiddle.net/dChUR/3 是这样的吗？添加 position:relative to container, position:absolute to box...

标签： html css css-float z-index

【解决方案1】：

稍微改变一下你的定位：

.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 规则。

【讨论】：

【解决方案2】：

你的想法是对的。在我看来，您只需将.tag 的position:relative 更改为position:absolute，并将position:relative 添加为.container。

【讨论】：

【解决方案3】：

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

关键是容器必须定位relative，标签定位absolute。

【讨论】：

嘿，我想做同样的事情，也让 div 的高度与图像相同，但是 height: 100% 对此不起作用（可能是因为绝对定位）跨度>

【解决方案4】：

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

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

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

top: 20px; left: 10px;

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

【讨论】：

【解决方案5】：

其实只是添加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>

【讨论】：

对，负边距与位置相对工作得很好。属性“top”、“left”和“z-index”不是必需的。