img tag and div next to each other

Question

So I've been struggling with this problem for a while now, see the attached image

I can't place an invisible div, that would take a function of "opening" the door next to the arrow, but I can't place div there because the img element pushes everything down even though horizontaly it only takes around 200pixels.

I tried adding properites to arrow in css like display:inline-block but the only properties I could apply succesfully ale margins.

Currently my code for div looks like it:

#beds_div{

background-color: black;
height: 200px;
width: 70px;
margin-left: 900px;
margin-bottom: 500px;
opacity: 1;

}

And for arrow

<img id="corridor_d" src="css/arrowdown.png" onclick="corridor_down()">


#corridor_d{
display: inline-block;
margin-top: 40%;
vertical-align: top;
}

Answer 1

I have set position relative, there you can adjust all direction to position the div. minus values for top will let you move up the div. try it yourself.

here I am showing an overlapping div. http://codepen.io/rashivkp/full/bgOJww/

<img class="pic" src="https://i.sstatic.net/FHNjC.png" />
<div class="invisible"></div>

.invisible {
  position:relative;
  top:-350px;
  left: 100px;
  background:#000;
  width:200px;
  height:300px;
}