这个问题似乎是由我的导航栏定位引起的 – 删除位置：绝对;或位置：亲戚;修复它不幸的是,由于我需要在导航栏上使用z-index,所以我无法摆脱这个定位.
为什么导航栏的定位导致模态被遮挡？有没有办法使模态出现在背景的前面,同时保持在导航栏上的定位？
解决方法 这是因为你的模式在你的#nav_inner< div>所以它会继承一些你不想要的样式.它不需要在那里
尝试将其移动到身体如下：
<HTML><head> <Meta http-equiv="Content-Type" content="text/HTML"; charset="utf-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/CSS/bootstrap-combined.min.CSS" rel="stylesheet"></head><body> <div ID="left_gutter"></div> <div ID="right_gutter"></div> <div ID="container"> <div > <div ID="nav_inner"> <div ID="nav_page"> <div > <div > <a href="#add_topic_modal" role="button" data-toggle="modal" ID="teach">Teach</a> </div> </div> </div> </div> </div> <div ID="footer"> <div ID="footer_inner"> </div> </div> <div ID="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hIDden="true"> <div > <button type="button" data-dismiss="modal" aria-hIDden="true">×</button> <h3 ID="add_lesson_label">Teach</h3> </div> <div > </div> <div > <button data-dismiss="modal" aria-hIDden="true">Cancel</button> </div> </div></body></HTML>
更新：
这是我知道改变DOM中的元素位置将会解决它的问题之一,但是了解原因是另一个问题.
取消位置：相对; z-index：2;从#navbar和#nav_inner也解决了这个问题,所以即使模态有位置：fixed; z-index：1050;其中z-index仅适用于某个位置,而固定位置将元素放置在相对于浏览器窗口的位置,由于父元素具有相对位置和z-index …魔术,因此仍然无法正常工作.
上面出现褪色背景的原因是因为这是使用JavaScript添加到身体,所以使用正确的z-index 1040没有任何麻烦,并被置于模态之上.
总结以上是内存溢出为你收集整理的html – 引导模式由于定位导航栏而变黑全部内容，希望文章能够帮你解决html – 引导模式由于定位导航栏而变黑所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）