tonyf tonyf - 3 months ago 15
CSS Question

How to overlay one div over another div

Hoping someone can assist but 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
.

Would appreciate any help in achieving this.

Answer

#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.