我需要协助覆盖一个单独的div在另一个单独的div。
我的代码是这样的:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
不幸的是,我不能嵌套div#infoi或img,在第一个div.navi。
它必须是两个分开的divs,如所示,但我需要知道我如何可以把div#infoi在div.navi和最右边,并集中在div.navi顶部。
下面是一个100%基于CSS的简单解决方案。“秘密”是在包装器元素中使用display: inline块。图片中的vertical-align: bottom是为了克服一些浏览器在元素后添加的4px填充。
建议:如果包装器之前的元素是内联的,那么它们最终可能是嵌套的。在这种情况下,您可以使用display: block将包装器“包装”到容器中——通常是一个好的旧div。
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}
<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>