文章/答案/技术大牛

发布

社区首页 >问答首页 >与Leaflet和mmenu冲突

问与Leaflet和mmenu冲突
EN

Stack Overflow用户

提问于 2016-01-15 07:04:42

回答 1查看 124关注 0票数 0

我正在学习mmenu，由于某种原因，当我用Leaflet渲染地图时，标题栏上有"Demo“字样的标题栏不显示。

如果你在地图的放大/缩小控件后面看，会出现白色的“汉堡”图标(靠近"+“符号)，但标题栏。我尝试使用z-index属性，并覆盖了一些属性值，但没有成功。

.mm-menu {   
  background: #279650 !important; 
 z-index: 10 !important;
}

我做的另一个尝试是：

.header{
            background: red !important;
            z-index: 9999999;   


}

我将附加2个图像，一个与地图渲染，另一个没有它。提前感谢您的任何提示。

css

leaflet

mmenu

jquery

回答 1

Stack Overflow用户

发布于 2016-01-15 12:08:02

这个问题已经解决了，在调试之后，我意识到它与我的html id标签有关，而与leaflet、mmenu类或id标签无关。

这是html：

        <div id="map"></div>
    <div id="page">                     
        <div class="header">
            <a href="#menu"></a>                
        </div>                      
        <nav id="menu">
            <ul>
                <li><a href="/">Home</a></li>
                <li>
                    <span>                          
                        <a href="/item1/">Item1</a>     
                        <input type="radio" class="Check" />     
                     </span>

                </li>
                <li>    
                    <span>

                        <a href="/item2/">Item2</a>
                        <input type="radio" class="Check" />                            

                     </span>                         
                </li>                   
                <li><span>About us</span>
                    <ul>
                        <li><a href="/about/history">History</a></li>
                        <li><a href="/about/team">The team</a>
                            <ul>
                                <li><a href="/about/team/management">Management</a>                                     
                                </li>
                                <li><a href="/about/team/sales">Sales</a></li>
                                <li><a href="/about/team/development">Development</a></li>
                            </ul>
                        </li>
                        <li><a href="/about/address">Our address</a></li>
                    </ul>
                </li>
                <li><a href="/contact/">Contact</a></li>
            </ul>
        </nav>
    </div>

我必须将以下属性值添加到.header类：

.header{  
   position: relative;
   z-index: 15; //can be ommited
}

唯一的区别是，在Chrome中，菜单栏出现在地图控件的前面，而在Firefox中，菜单栏出现在地图控件的后面。我决定向下移动控件，以避免这种重叠的问题(下图)，即使它得到了解决，我也愿意接受建议。

最好的！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34801433

复制

相似问题

问与Leaflet和mmenu冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与Leaflet和mmenu冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与Leaflet和mmenu冲突
EN