导航栏 ------ 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" ...
随机推荐
- js控制html5 【video】标签中视频的播放和停止
需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...
- [InfluxDB] 安装与配置
[InfluxDB] 安装与配置 1- 下载 ubtuntu: wget https://dl.influxdata.com/influxdb/releases/influxdb_1.5.2_amd6 ...
- sql Find_IN_SET 用法
字段以 1,2,3,4 格式存储的SELECT * from test where FIND_IN_SET('15',btype) GROUP_CONCAT + group_by
- 黄聪：Pjax 无刷新开发web，更好用户体验
什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...
- 黄聪：3分钟学会sessionStorage用法
前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的 ...
- SpringBoot使用redis缓存List
一.概述 最近在做性能优化,之前有一个业务是这样实现的: 1.温度报警后第三方通讯管理机直接把报警信息保存到数据库: 2.我们在数据库中添加触发器,(BEFORE INSERT)根据这条报警信息处理业 ...
- 【HTTP】使用 RestTemplete 实现 post请求
如上图,要求: post请求; x-www-form-urlencoded 类型; 如下代码没有进行整理,但是测试OK package com.chinamobile.epic.http; impor ...
- ES6基础二（数组）
JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式:在普通的JSON最后多了一个length属性,就可以使用ES6的语法转变成数组. 当然了,不是所有的j ...
- Web jsp开发学习——点击菜单页面切换
两个网页使用同一个head,在点击“首页”后,head的“首页”变成绿色,点击“新闻”后,head的“新闻”变成绿色,head的“首页”恢复原来的颜色 head.jsp <%@ page ...
- NodeJs针对Express框架配置Mysql进行数据库操作
Express版本:4.14.1 说明:如下配置以express为例进行配置并进行测试,当然mysql中间件也可以在nodejs中单独使用. 参考:NodeJs的Mysql中间件Github地址 1. ...