Question

我有一个带代码的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>

enter image description here 问题是，我想在图像顶部显示ul是这样的，我不能将它添加到div背景，否则它会因为div设置而在某些地方被歪曲。如何让ul出现在img

之上

Answer 1

尝试使用像

这样的位置属性

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

您可以根据您的设计使用position: relative/absolute/static/fixed

如果您想在后台使用，请使用backgroud-image代替ul，而不是单独使用img

Answer 2

如果我理解你的话，你想要有这样的东西：

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

fiddle

希望这有帮助

Answer 3

你去了：

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

编辑：

我不完全确定你想要实现什么，但是如果编辑标记是一个选项，我会得到你的代码的略微简化版本，这完全符合你的要求 - 它将菜单项放在菜单包装器中你的HTML图片所以这是标记：

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

这是CSS：

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

显然CSS可以内联，但不推荐。通过将菜单项包装在div容器中并将其绝对定位来实现整体效果，这使您可以选择使用顶部，左侧，右侧和底部来移动关于其父级的整个批次。
如果这是你需要的那么酷，如果不让我知道所以我可以调整代码。

让Div的孩子在html中显示在另一个上面

3 个答案: