使用负边距顶部在同级div上使用div重叠img标记 [英] overlay a img tag with a div using negative margin-top on the sibling div
问题描述
我尝试用 div 覆盖 img code>在 div 上， div 中的文本显示在图像上，在 img 下显示 div 的c $ c> background p>
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>有人< / div>
< / div>
< / body>
< / html>
css：
code> .a {
height：60px;
background：#ccc;
}
.b img {
height：60px;
width：60px;
background：red;
}
.c {
background：blue;
height：20px;
margin-top：-20px;
}
我在IE9和chrome中观察到这种行为。
这是预期的行为吗？
如果是，原因是什么？
我可以使 div 绝对或相对来实现我想要做的，但我不能理解这种行为。
http://jsbin.com/gejuzuza/1/edit
如果你添加 position：relative; code> .c ，它会将 div 与 c 上面 div 与 b 类
I am trying to overlay a img with a div using negative margin on the div, the text inside the div is displayed over the image, while the background of the div is being displayed under the 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;
}
i have observed this behavior in IE9 and chrome.
is this behavior as expected? if yes, what is the reason?
I could make the div absolute or relative to achieve what i am trying to do, but i am not able to understand this behaviour.
http://jsbin.com/gejuzuza/1/edit
If you add position: relative; to your CSS for .c, it will put the div with the c class above the div with the b class
这篇关于使用负边距顶部在同级div上使用div重叠img标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
