Make children of Div to be shown on top of another in html

Question

I have a div with code

.popupClass {
    width: 632px;
    height: 210px;
    position: absolute; 
    bottom:0;
    margin-bottom: 60px;
}
    <div class="popupClass">
         <div style="margin-left: 90px; width: 184px; height: 210px; position:relative; z-index:1"  id="mainMenuDiv" hidden>
             <img style="z-index:2;" id="menu" src="images/popup.png" width="184" height= "210" alt="menu_btn"/>
             <a href="categories.php" style="bottom:-80px;" >Categories</a>
             <ul>
                  <li><a href="categories.php" >Categories</a></li>
                  <li><a href="about.php" >About Us</a></li>
             </ul>
         </div>

         <div style="margin-left: 190px; width: 184px;" id="shareDiv" hidden>
             <img id="menu" style="margin-left: 90px" class="clicker" src="images/popup.png" width="184" height= "210" alt="menu_btn"/>
         </div>

         <div id="dDiv" hidden>
             <img id="menu" style="margin-left: 90px" class="clicker" src="images/popup.png" width="184" height= "210" alt="menu_btn"/>
         </div>

     </div>

the problem, is i want to show the ul on top of the Image is such that, i can't add it to div backgrond otherwise it will get croped at some places because of div settings. How can i make the ul appear on top of img

Answer 1

Try to use position property like,

<img style="position:relative;z-index:1" id="menu" src="images/popup.png" .../>
<ul style="position:relative;z-index:2">
   <li><a href="categories.php" >Categories</a></li>
   <li><a href="about.php" >About Us</a></li>
</ul>

You can use position: relative/absolute/static/fixed according to your design

And if you want it in background then use backgroud-image for ul instead of using img separately

Answer 2

If i understood you right, you want to have something like this:

<div style="position: relative">
  <img style="position:absolute;z-index:1"/>
  <ul style="position:absolute;z-index:100">
    <li><a href="categories.php">Categories</a></li>
    <li><a href="about.php">About Us</a></li>
  </ul>
</div>

You could then set top/left/bottom/right position to the ul .

fiddle

Hope this helps

Answer 3

There you go:

<div style="margin-left: 90px; width: 184px; height: 210px; "  id="mainMenuDiv">
   <img style="position:absolute;z-index:1; top:80px" id="menu" src="http://placehold.it/350x150"/>
   <ul style="position:absolute;z-index:2;">
      <li><a href="categories.php" >Categories</a></li>
      <li><a href="about.php" >About Us</a></li>
   </ul>
</div>   

EDIT:

I am not entirely sure what exactly you want to achieve, but if edits to markup are an option, I got slightly simplified version of your code, which does exactly what you asked - it places menu items inside menu wrapper ON TOP of your html image.
So here is the markup:

<div class="popupClass">
    <img id="menu" src="http://placehold.it/350x150" alt="menu_btn" />
    <div id="menuWrapper">
        <a href="categories.php" class="link">Categories</a>
        <ul>
            <li>
                <a href="categories.php">Categories</a>
            </li>
            <li>
                <a href="about.php">About Us</a>
            </li>
        </ul>
    </div>
</div>   

and here is CSS:

#menu {
    width:184px;
    height:210px;
}
#menuWrapper {
    position:absolute;
    top:50px;
    left:30px;
}
.link {
    display:block;
}   

Obviously CSS can be inlined, but not recommended. Whole effect achieved by wrapping up menu items in a div container and positioning it absolutely, which gives you an option of using top, left, right and bottom to move whole lot regarding its parent.
If this is what you need then cool, if not let me know so I can adjust the code.