jQuery 插件不重叠 DIV?
我正在尝试使用位于以下位置的下拉多选小部件: http://www.erichynds.com/jquery/jquery-ui- multiselect-widget/#disqus_thread
现在请看一下: http://jsfiddle.net/mdrago/MNekN/4/
我遇到了这个特殊问题下拉菜单不会与中间 DIV 重叠。我很确定这不是小部件的问题,因为其他控件之前也发生过同样的问题。
我无法调整中间 DIV 的大小,因为那里会显示地图。
我做错了什么?
I'm trying to use the dropdown multiselect widget found at:
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/#disqus_thread
Now please take a look at:
http://jsfiddle.net/mdrago/MNekN/4/
I ran into this particular problem were the dropdown will no overlap the middle DIV. I'm pretty sure is not an issue with the widget since this same kind of problem happened before with other controls.
I cant resize the middle DIV since a map will be shown there.
What I'm doing wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题在于选择框被包裹在
#framecontentTop
中,它具有固定的高度,并且还设置了overflow:hidden
。这告诉浏览器裁剪内容并且不渲染 div 边界之外的任何内容。解决办法是将
#framecontentTop
的CSS修改为overflow:visible; z 索引:1;
。这将渲染 div 的全部内容,即使它位于外部,并确保它位于其他所有内容之上,而无需显式设置 z 索引。 div 外部的子元素将使用父元素的 z-index 进行渲染,因此您的选择框将位于绝对定位的地图框的顶部。The problem is that the selection box is wrapped in
#framecontentTop
, which has a fixed height and also hasoverflow:hidden
set. This tells the browser to crop the content and don't render anything outside the bounds of the div.The solution is to change the CSS of
#framecontentTop
tooverflow:visible; z-index:1;
. This will render the whole content of the div, even if it falls outside and makes sure it's on top of everything else without an explicit z-index set. The child elements outside the div will render using the parent's z-index, so your selection box will be on top of the absolutely positioned map box.