导航栏 ------ 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" ...
随机推荐
- [转]Python中yield的解释
转自: http://python.jobbole.com/83610/ 本文作者: 伯乐在线 - wklken .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 翻译 来源于stackover ...
- 12c R2 RAC Oracle Linux 7.3 ESXI6.5
环境:ESXI6.5虚拟化 主机配置:操作系统 Oracle Linux 7.3 CPU:8个VCPU 内存:16G 本地磁盘:50G 全程默认最小化安装Oracle Linux 7.3操作系统 每个 ...
- gpio模拟I2C，驱动pcf8574T
一.pcf8574T介绍 查看pcf8574T的数据手册, A表示读或写,当A为1的时候表示读,当A为0的时候表示写.现把地址控制线,即A2.A1.A0全部接地,可以得到读控制指令为0x41,写控制指 ...
- ThreadingTCPServer 如何设置端口重用
一个典型的TCPServer的建立 #ThreadingTCPServer从ThreadingMixIn和TCPServer继承 #class ThreadingTCPServer(Threading ...
- php中的this，self，parent
this就是指向当前对象实例的指针,不指向任何其他对象或类 如$this->fun1(); self:指向类本身,也就是self是不指向任何已经实例化的对象 ,self使用来指向类中的静态属性或 ...
- 【springboot】之利用shell脚本优雅启动，关闭springboot服务
springbot开发api接口服务,生产环境中一般都是运行独立的jar,在部署过程中涉及到服务的优雅启动,关闭, springboot官方文档给出的有两种方式, 1.使用http shutdown ...
- C++进阶--隐式类型转换
//############################################################################ /* 隐式类型转换 * * 类型转换可分为 ...
- QHBoxLayout移除控件
def clear_layout(widget, layout): buttons = widget.findChildren(QtGui.QPushButton) while layout.item ...
- MongoDB查询结果存放入新的Collection
第一种方法 var lst = db.visits_201501.find({ "url":/http:\/\/m.baidu.com\/application/ }); whil ...
- CentOS6 配置静态IP
1.首先配置网络连接方式 VMware选择编辑->虚拟网络编辑器->VMnet0桥接模式 2.配置网卡 vim /etc/sysconfig/network-scripts/ifcfg-e ...