Question

我正尝试在img上使用div覆盖margin div div，background内的文字显示在图片上方，div的{{1}}显示在img下。

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="a">
    <div class="b"><img src=""/></div>
    <div class="c">somebody</div>
 </div>
</body>
</html>

的CSS：

.a{
  height:60px;
  background:#ccc;
}

.b img{
  height:60px;
  width:60px;
  background:red;
}

.c{
  background:blue;
  height:20px;
  margin-top:-20px;
}

我在IE9和Chrome中观察到了这种行为。

这种行为是否符合预期？如果是的话，原因是什么？

我可以让div absolute或relative来实现我想要做的事情，但我无法理解这种行为。

http://jsbin.com/gejuzuza/1/edit

Answer 1

如果您将position: relative;添加到.c的CSS中，则div会将c类放在div上方b } class

在兄弟div上使用负margin-top覆盖带有div的img标签

1 个答案: