Javascript 使Div的子项在html中显示在另一个子项的顶部

我有一个带密码的div

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

.popupClass{
宽度：632px；
高度：210px；
位置：绝对位置；
底部：0；
边缘底部：60px；
}

---

问题是，我想在图像顶部显示ul，这样，我不能将其添加到div backgrond，否则由于div设置，它将在某些位置被交叉。如何使ul显示在img的顶部尝试使用位置属性，如

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

您可以根据您的设计使用

---

如果你想把它放在背景中，那么就用

background image

作为

ul

而不是单独使用

img

，

如果我没弄错的话，你想要这样的东西：

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

然后可以将上/左/下/右位置设置为

ul

希望这对你有所帮助

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

显然CSS可以内联，但不推荐。将菜单项包装在div容器中并绝对定位，从而实现整体效果，这使您可以选择使用“上”、“左”、“右”和“下”来移动与其父项相关的整个批次。

---

如果这是你需要的，那么酷，如果不让我知道，这样我可以调整代码

你能提供一个提琴吗？你可以在不裁剪的情况下使图像成为背景，这很好吗？使用绝对位置非常容易，给ul一个比图像更高的z索引，并将父对象设置为positin relative我已经尝试过了，它确实有效，但是ul显示在img下面，如何使其显示在img顶部？使用

position:absolute

表示

ul

。为什么要使用

img

如果你想在

background

中使用

background image

我已经尝试过了，问题是ul显示在img下面，而不是在img上面。是否可以在img上面显示ul？我想要的行为，它将是，如果我添加背景divYes-调整img元素的“顶部”属性。它可以是负片，即顶部：-25px；当然，让我澄清一下-你需要你的菜单出现在弹出窗口中吗？很抱歉反应太晚-并查看对我答案的编辑

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

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