导航栏 ------ z-index
z-index 显示的层叠关系，数字越大越在上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px; /*从80px以下显示*/
} .header{
width: 100%;
height: 80px;
background-color: red;
position: fixed;
top:0;
z-index: 99999; /*z-index最大，始终显示在上面*/
}
.wrap{
width: 100%;
height: 500px;
background-color: green;
color: #fff;
}
.wrap p{
position: relative;
z-index: 3;
} </style>
</head>
<body style="height: 2000px;"> <div class="header"></div> <div class="wrap">
<p>内容区域</p> //最终结果 ：滑动滚动条，会被导航栏盖住
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
z-index: 12; }
.sendie{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 270px;
left: 320px;
/*z-index: 10;*/
}
.father2{
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
z-index: 11;
}
.tailiang{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: -30px;
left: 320px;
/*z-index: 5;*/
}
</style>
</head>
<body style="height: 2000px"> <div class="father">
<div class="sendie">
</div>
</div> <div class="father2">
<div class="tailiang"></div>
</div> </div>
</body>
</html> <!--使用z-index比较的时候要看父z-index的大小，子z-index的大小不作为考虑-->
导航栏 ------ z-index的更多相关文章
- uniapp动态修改导航栏
1.修改导航栏buttons 如图动态修改角标 <template> <view> </view> </template> <script> ...
- ElementUI+命名视图实现复杂顶部和左侧导航栏
在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...
- ElementUI 复杂顶部和左侧导航栏实现
描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...
- TextView+Fragment实现底部导航栏
前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...
- 使用vue给导航栏添加链接
如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...
- 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)
如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...
- iOS开发笔记13:顶部标签式导航栏及下拉分类菜单
当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...
- phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示
之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...
- 用Jquery 仿VS 样式的 导航栏插件
在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...
- CSS常用操作-导航栏
1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
随机推荐
- Abp问题解决集合1
ABP学习经验 1. 视图中(控制器中直接使用仓储)会遇到使用实体外键,出现数据库连接关闭的错误 初学者经常会犯这样一个错误,没错说的就是我自己,这个问题折腾了我很长世间.还是没有细看文档,对ab ...
- 在Python中调用Java扩展包HanLP测试记录
最近在研究中文分词及自然语言相关的内容,关注到JAVA环境下的HanLP,HanLP是一个致力于向生产环境普及NLP技术的开源Java工具包,支持中文分词(N-最短路分词.CRF分词.索引分词.用户自 ...
- Spring Cloud(Dalston.SR5)--Ribbon 中间层负载均衡
Spring Cloud 集成了 Ribbon 并结合 Eureka 可以实现客户端的负载均衡,使用 @LoadBalanced 修饰的 RestTemplate 类拥有了负载均衡功能,在 Sprin ...
- Php文件上传类class.upload.php
简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮助你快速的给自己的网站集成上传文件功能.不仅如此,此分类还有一些列的处理功能,可以对上传的文件或者本地的文件进行处 ...
- Linux磁盘监控工具说明
1.1 iostat 系统systat包里的工具,以kB/s为单位统计,2表示以2秒为频率统计一次:iostat –x –k 2 10000 rrqm/s:每秒这个设备相关的读取请求有多少被Merge ...
- 解决cron无法运行报错：FAILED to authorize user with PAM (Module is unknown)
查看cron运行日志 tail -f /var/log/cron 报如下错误: May 8 10:14:01 localhost crond[9399]: (root) FAILED to autho ...
- pyqt环境安装
pyqt环境配置 pip install pyqt5 windows下 pip install pyqt5-tools linux安装designer sudo apt install qttools ...
- Tribon/AM 数据库名字的含义
收集在这里备用 数据库名 Tribon环境变量 内容描述 船体型线数据库 SB_CGDB 船体外型信息 型表面,船体曲线,板缝 船体结构数据库 SB_OGDB 船体模型信息 板材数据库 SB_PLDB ...
- java中经常使用的Swing组件总结
1.按钮(Jbutton) Swing中的按钮是Jbutton,它是javax.swing.AbstracButton类的子类,swing中的按钮可以显示图像,并且可以将按钮设置为窗口的默认图标,而且 ...
- JS属性描述符之Object.defineProperty()定义对象属性特性
一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...