漂浮在图像上的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,我会得到一些启发性的"啊哈"时刻并弄明白.解决方案:

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

您需要在容器上设置相对定位,然后在内部标记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>