导航栏 ------ 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" ...
随机推荐
- SpringMVC和Struts是线程安全的吗？为什么？
线程不安全的.(其实我觉得回答为:存在线程安全问题 这样比较好点) 原因如下: 第一点,先理解为何线程不安全 1 struts1的action是单例的,所以存在线程安全问题(struts2是多例的,不 ...
- 部署openresty遇到的一些坑
最近,遇到一个问题,就是我们CMS系统制作的产品页面和产品列表页面,发布到nginx服务器上,因为业务要求,客户看到的链接必须是短链接,当前的做法就是在nginx的配置中通过rewrite的方式做的. ...
- Python初学注意问题
本文是看到的,然后结合自己之前学习的过程也碰到的问题,所以就引用过来了:http://www.cnblogs.com/walkingp/p/3261663.html 一.注意你的Python版本 Py ...
- flex布局demo
flex布局 http://static.vgee.cn/static/index.html
- Lucene 4.0 正式版发布，亮点特性中文解读[转]
http://blog.csdn.net/accesine960/article/details/8066877 2012年10月12日,Lucene 4.0正式发布了(点击这里下载最新版),这个版本 ...
- 无法清除cookie中的属性值之对解决问题的思考
关于如何快速解决一个自己知识以外的问题的思考 做好任何事情都是讲究方法的,这是我健身之后的一个领悟,用正确的方式做事,自己的付出才能有价值. 首先分析问题: 比如我想清除cookie里面的token, ...
- uoj#274. 【清华集训2016】温暖会指引我们前行
http://uoj.ac/problem/274 由于边权互不相同,只需用lct维护带加边的最大生成树 #include<bits/stdc++.h> #define lc ch][0 ...
- 廖雪峰Java1-4数组操作-4多维数组
二维数组 二维数组就是元素为数组的数组 二维数组每个数组的长度不要求一样.比如 int[][] = { { 1, 2 }, { 3, 4, 5 }, { 6, 7, 8, 9 } } int[][] ...
- 方法 - 调试Dll方法
1.exe加载dll 2.Dll属性设置2.1运行exe生成Debug/...exe2.2属性->调试->命令-> 改成 ./Debug/调试Dll.exe ../Debug/调试D ...
- MySQL binlog 企业案例升级版
需求:1.创建一个数据库 oldboy2.在oldboy下创建一张表t13.插入5行任意数据4.全备5.插入两行数据,任意修改3行数据,删除1行数据6.删除所有数据7.再t1中又插入5行新数据,修改3 ...