Могу ли я иметь элемент div над изображением?

Question

Я использую изображение SVG над этим изображением. Мне нужно иметь div над изображением, чтобы установить область кнопки над изображением. Я разместил содержимое div в моем html-файле, но мой файл изображения скрывает содержимое div. Как это сделать? Это мой HTML-код:

<div class="fancybox" id="nav" href="#inline1"/> 
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content 

Это мой CSS файл:

#nav { 
    line-height:30px; 
    background-color:#00FF66; 
    height:400px; 
    width:200px; 
    float:left; 
    padding:9px;   
} 

Answer 1

<div class="outerBoxContent"> 

    <div class="fancybox" id="nav" href="#inline1"/> 
    <img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content 

</div> 

CSS

.outerBoxContent{position: relative;} 
.outerBoxContent .fancybox{position: absolute;top: 0px;left: 0px;height: 100%;width: 100%:z-index:123} 

Это, как вы можете поместить содержимое поверх дел.

Answer 2

.fancybox{ 
    position:relative; 
    height://height go image 
    width:// of image 
    } 
    .fancybox img{ 
    position:absolute; 
    height://height go image 
    width:// of image 
    z-index:-1; 
    } 

    .myDiv{ 
    position:absolute; 
    width:// width of dive 
    z-index:1; 
    left://margin from left 
    right://margin right 
    top:margin from top 
    bottom:margin from bottom 

} 


<div class="fancybox" id="nav" href="#inline1"/> 
<img src="billing.svg" id="my_image" class="gold1"/> 
<div class="myDiv"></div> 

</div>