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的更多相关文章

  1. uniapp动态修改导航栏

    1.修改导航栏buttons 如图动态修改角标 <template> <view> </view> </template> <script> ...

  2. ElementUI+命名视图实现复杂顶部和左侧导航栏

    在了解了命名视图的用途后,发现用命名视图来实现复杂导航更加省力.更多知识请参考这里 这里只说明重要配置内容,其他内容配置请参考上一篇初始版本: ElementUI 复杂顶部和左侧导航栏实现 或参考文末 ...

  3. ElementUI 复杂顶部和左侧导航栏实现

    描述:如图 项目路径如下图所示: 代码实现: 首先在store.js中添加两个状态: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vue ...

  4. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  5. 使用vue给导航栏添加链接

    如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...

  6. 【原创+译文】官方文档中声明的如何创建抽屉导航栏(Navigation Drawer)

    如需转载请注明出处:http://www.cnblogs.com/ghylzwsb/p/5831759.html 创建一个抽屉导航栏 抽屉式导航栏是显示在屏幕的左边缘,它是应用程序的主导航选项面板.它 ...

  7. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  8. phpcmsv9如何实现添加栏目时不在首页内容区显示只在导航栏显示

    之前王晟璟一直使用PHPCMSV9系统建过自己的个人门户网站,同时也建立了一个其他类型的网站,感觉非常不错,我不得不说PHPCMSV9的功能非常齐全,非常强大. 但有一点时常让王晟璟感到很烦脑,那就是 ...

  9. 用Jquery 仿VS 样式的 导航栏插件

    在开发B/S 项目过程中,根据主界面设计要求,需要做一个类似VS 左边工具栏样式的菜单导航栏,在网上搜索无果后,于是决定自已做一个. 由于前台用JQuery开发, 想到网上很多人用JQuery做插件, ...

  10. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. C/C++中带可变参数的函数

    1.带可变参数的函数由来 当函数中的参数个数不确定时,这时候就需要带可变参数的函数! 如我们经常使用的C库函数printf()实际就是一个可变参数的函数, 其原型为: int printf( cons ...

  2. Hadoop的单机模式、伪分布式模式和完全分布式模式

    1.单机(非分布式)模式 这种模式在一台单机上运行,没有分布式文件系统,而是直接读写本地操作系统的文件系统. 2.伪分布式运行模式 这种模式也是在一台单机上运行,但用不同的Java进程模仿分布式运行中 ...

  3. Vivado HLS初识---阅读《vivado design suite tutorial-high-level synthesis》（5）

    Vivado HLS初识---阅读<vivado design suite tutorial-high-level synthesis>(5) 1.创建工程 启动vidado HLS co ...

  4. Cygwin使用1-root用户登录

    设置cygwin中的root用户登录 在windows中模拟linux环境,可以安装cygwin.cygwin安装之后,系统默认的是以你的windows用户名做为cygwin的登录名的.权限却依然是普 ...

  5. postgresql 查看数据库,表,索引,表空间以及大小

    转载 http://blog.51yip.com/pgsql/1525.html 1,查看数据库 playboy=> \l //\加上字母l,相当于mysql的,mysql> show d ...

  6. awk中使用shell的环境变量

    awk中使用shell的环境变量一:"'$var'"这种写法大家无需改变用'括起awk程序的习惯,是老外常用的写法.如:var="test"awk 'BEGIN ...

  7. C++进阶--构造函数和析构函数中的虚函数

    //############################################################################ /* 任何时候都不要在构造函数或析构函数中 ...

  8. Quartz不用配置文件配置启动

    StdSchedulerFactory schedulerFactory = null; try { schedulerFactory = new StdSchedulerFactory(); Pro ...

  9. 学习笔记之Python调试 - pdb

    python调试神器——pdb - 软谋python https://mp.weixin.qq.com/s/w3Xw8I_zh7MFq2dx5kdQXw 优秀开发者必备技能包:Python调试器 - ...

  10. 【ZZ】详解哈希表的查找

    详解哈希表的查找 https://mp.weixin.qq.com/s/j2j9gS62L-mmOH4p89OTKQ 详解哈希表的查找 2018-03-01 算法与数据结构 来自:静默虚空 http: ...