用浮动堆叠两个 DIV：右
嗨嗨，我正在尝试使用 DIV 创建一个向下滑动的菜单，但遇到了一个我无法真正弄清楚如何克服的问题。让我们看一下下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
我想要实现的就是让我的滑动菜单停留在我的表单元素 div 的顶部。请告知如何做到这一点。非常感谢！
:)
Hihi, I am trying to create a slide down menu using DIV, but hit a problem that I can't really figure out how to overcome. Let's take a look at the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#menu").click(function () {
$('#menuItem').slideDown('slow');
});
});
</script>
</head>
<body>
<div style="width: 500px; margin: 0px auto; padding: 10px;">
<div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
MenuItem1<br />
MenuItem2<br />
MenuItem3<br />
MenuItem4<br />
MenuItem5<br />
MenuItem6<br />
MenuItem7
</div>
<div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
My Menu
</div>
</div>
<div style="margin: 50px 0px; padding: 0px; text-align: center;">
<div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
<div style=" position: relative; z-index: 1; float: right;">Form Element</div>
</div>
</div>
</body>
</html>
All I want to achieve is to make my slide down menu stay on top of my form element div. Please advice how can this be done. Many thanks!
:)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
快速而肮脏：我为菜单添加了一个绝对定位的外部包含，然后将
top:40px应用于内容div将其向下推以补偿菜单。当我输入此内容时，dotty 已经在我面前用几乎相同的方法回答了。但是，在上面的代码中，各个菜单
div按照您的需要正确地彼此相邻浮动，就像您在问题中发布的第一个代码中一样。现在可能有一些
div和样式元素有点多余。编辑：我现在确实想到 dotty 代码中菜单的操作实际上可能是您想要的菜单。
Quick and dirty: I added an absolutely-positioned outer containing for the menu, and then applied
top:40pxto the contentdivto push it down to compensate for the height of the menu.As I type this, dotty's already answered before me with a pretty much identical approach. However, in the code above, the individual menu
divs are properly floating next to each other as you want them to, as they do in the first code you posted in the question.There are probably some
divand styling elements that are a little redundant there now.Edit: It does occur to me now that the operation of the menu in dotty's code is actually probably how you intended for the menu to be.
将 #menuItem div 放入 #menu div 内，并将 #menuItem div 的位置设置为绝对位置并删除其浮动。
Put the #menuItem div inside the #menu div, and set the #menuItem div's position to absolute and remove it's float.