如何将一个div覆盖在另一个div上 [英] How to overlay one div over another div
本文介绍了如何将一个div覆盖在另一个div上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
I need assistance with overlaying one individual div
over another individual div
.
My code looks like this:
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
Unfortunately I cannot nest the div#infoi
or the img
, inside the first div.navi
.
It has to be two separate div
s as shown, but I need to know how I could place the div#infoi
over the div.navi
and to the right most side and centered on top of the div.navi
.
解决方案
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}
<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>
I would suggest learning about position: relative
and child elements with position: absolute
.
这篇关于如何将一个div覆盖在另一个div上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文