使Div的子代在html中显示在另一个子视图的上方
穆罕默德·乌玛（Muhammad Umar）
我有一个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>
问题是，我想在图像顶部显示ul，因此我无法将其添加到div背景，否则由于div设置，它将在某些地方被裁剪。我该如何使ul出现在img顶部
多伊兹
你去了：
<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容器中并进行绝对定位来实现整体效果，这使您可以选择使用上，左，右和下移动其父级的全部。
如果这是您所需要的，那么冷静，如果没有，请告诉我，以便我调整代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
无法在StackLayout-XamarinForms中的另一个视图上方显示视图
- 2
CSS-在另一个上方显示div
- 3
尝试让一个子视图使用ui-router调用另一个子视图
- 4
在添加另一个子视图之前等待一个 addSubview 成功
- 5
如何包装flexbox子代，以便多个子代堆叠在另一个子代旁边？
- 6
在XSLT中，如何根据另一个子节点的值显示一个子节点的值
- 7
一个子div必须溢出，另一个不能
- 8
如何使div作为另一个div的子代？
- 9
在MATLAB中的另一个子图中绘制一个子图
- 10
VBA EXCEL：如何在另一个子例程中调用一个子例程？
- 11
如何在另一个视图上方显示PickerView
- 12
在另一个div上方显示未知大小的div
- 13
从另一个 ViewController 中删除子视图
- 14
从另一个子执行子
- 15
设置子视图的中心重心会更改水平布局中另一个子视图的布局对齐方式吗？
- 16
当另一个子视图改变位置时如何调整子视图的大小
- 17
Laravel 5.2：如何从另一个子视图中获取parentView的子视图中的变量？
- 18
单击链接时在另一个上方显示div
- 19
如何从Sitecore中的另一个子布局访问子布局控件？
- 20
从另一个子窗体访问子窗体中的控件
- 21
从主 HTML 在 div 中显示另一个 HTML？
- 22
基于另一个子帧
- 23
从另一个子域访问Cookie
- 24
另一个子查询问题
- 25
在另一个div的图像上方添加文字
- 26
将父div高度和另一个子div的高度扩展为更大的子div的高度
- 27
将父div高度和另一个子div的高度扩展为更大的子div的高度
- 28
在同一工作表VBA中调用另一个子
- 29
链接到另一个HTML文件中的另一个div
我来说两句