在mui中遇到的内容覆盖导航栏的问题

一、问题描述:

公司项目中为了让内容以页面的形式显示,并要格式化页面内容,采用了百度的UEditor编辑器来显示内容,但是遇到了一个问题就是当下拉页面到一定距离之后,页面上方的导航栏会被内容遮盖。

二、解决办法:

将导航栏(mui头部)的z-index的值设置成大于内容区域(UE编辑器)的z-index。因为对z-index不是特别熟悉,应该说对滚动页面的实现不太熟悉,所以找问题原因的时候没有第一时间想到是这个问题。在调试器中看到UEditor编辑器的样式有个position:fixed,第一个想到的就是改变这个定位的样式。后来的测试发现,只能用改变z-index的值这种方式才有效,因为在百度UEditor编辑器的实现中,编辑器的样式是动态添加的,就算改变了编辑器的定位方式,但是它被设了一个1000大小的z-index,它始终大于mui头部默认的z-index的大小。所以内容往上拉到一定距离就会在mui页面的头部上方显示。

三、详细分析:

初始情况下,mui的头部的z-index等于10,显示滚动UEeditor编辑器有关的div好像还没有这个属性.

当内容往上拉到一定高度的时候,UEditor的一个div有了一个z-index等于1000的值(好奇UEditor的实现),elememt.style的样式有一个z-index等于1000,如下:

改变mui头部的z-index的值,将其值设置成一个大于和UEditor编辑器滚动有关的div的z-index的值,这样就可以让mui的头部总是在编辑器的上方显示了:

时间: 2024-11-06 05:25:16

在mui中遇到的内容覆盖导航栏的问题的相关文章

iOS:让UIView覆盖导航栏

当我们想做一个弹出式菜单时,想将导航栏也一起盖住不显示的话,可以用如下语句实现: UIView* myView = /* 你自定义的view */; UIWindow* currentWindow = [UIApplication sharedApplication].keyWindow; [currentWindow addSubview:myView]; iOS:让UIView覆盖导航栏

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

《AndroidStudio每日一贴》9. 如何使用导航栏快速切换项目中的视图?

<AndroidStudio每日一贴>9. 如何使用导航栏快速切换项目中的视图? 操作方法: 导航栏可以快速切换项目中的视图显示. 使用command + 向上键头显示导航栏,然后使用方向键来定位你要查看的文件或文件夹. 更多实用技巧请查看<AndroidStudio实用指南> 博客: http://blog.csdn.net/wirelessqa 作者: 老毕 版权声明:本文为博主原创文章,未经博主允许不得转载.

Bootstrap历练实例:响应式导航栏

响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉

ios 实现自定义状态栏StatusBar 和 导航栏navigationBar 的状态和颜色

很多app中可以看到不同与导航栏的状态栏的颜色,他妈的真绕嘴. 一.更改状态栏颜色 (StatusBar) 就是比如导航栏是红色的状态栏是绿色的. 要实现这样的效果其实很简单,就是添加一个背景view. 简单的实现过程如下: 1 // 设置导航颜色 可用 2 [self.navigationController.navigationBar setBarTintColor:[UIColor redColor]]; 3 //创建一个高20的假状态栏 4 UIView *statusBarView =

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

IOS导航栏的使用方法

本文是使用纯代码实现一个导航栏的效果.单击按钮并且产生事件.基本思路是: 1.创建一个导航栏(UINavigationBar对象) 2.创建一个导航栏集合(UINavigationItem对象) 3.创建一个左边按钮.一个右边按钮(UIBarButtonItem对象),并实现对应的事件方法 4.将导航栏集合添加到导航栏中,设置动画关闭 5.把左右两个按钮添加到导航栏集合中去 6.在视图中显示当前创建的导航栏 具体的实现代码如下: ViewController.h文件中的代码不用改变,如下所示:

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro

iOS6和iOS7的导航栏区别

在说明autolayout之前先说明一下iOS6和iOS7的导航栏区别,还是通过简单的图来说明吧,一个坐标为(0,0,320,200)的ImageView,即Y坐标为0,如下图, iOS6的效果图, iOS7的效果图, 可以看出明显的区别,ImageView在iOS7系统上面,上面一截的内容被导航栏和状态栏遮挡. 在iOS7中所有导航栏都为半透明,导航栏(height=44)和状态栏(height=20)不再单独占用高度,即View的(0,0)坐标是从屏幕左上角开始的:而在iOS7之前的系统中,