需求，html底部为地图，上层是各个div

HTML
<body>

   //地图

   <div id='map' id="demo1"></div>

   <div class="middleTop" id="demo2">

   </div>

</body>
css样式

.middleTop {

    width: 100%;

    height: 8%;

    position: absolute;

    top: 1px;

    text-align: center;

    background: #00065b;

}

至此，demo2div就在demo1的上层了。

HTML悬浮div的更多相关文章

  1. CSS鼠标悬浮DIV后显示DIV外的按钮

    昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮. 效果如下: 问题: 在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题 ...

  2. 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome

    在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...

  3. 简单文本悬浮div提示效果

    <html> <head> <script src="jquery-1.9.1.min.js" type="text/javascript& ...

  4. 鼠标经过，显示悬浮DIV

    属牛人的本命佛是虚空藏菩萨.属牛人可佩戴属牛黄玉本命佛来提升财运,黄玉的金黄色代表蒸蒸日上,而“金黄”也就是“黄金”的到(倒)来,象征着富贵与财气,佩戴可以招财招富贵,同时黄玉亦是希望之石,可带来智慧 ...

  5. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  6. 网页底部广告悬浮弹窗（css）

    有的单页面需要添加广告等悬浮div. 部分代码: <div class="flex"> 内容.... </div> 主要css代码: .flex{posit ...

  7. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  8. CSS篇

    一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子 ...

  9. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  10. ArcGIS API for JavaScript开发环境搭建与发布以及基本功能实现

    1.背景介绍 ArcGIS API for JavaScript 咱这就不介绍了,具体可看ESRI中国的介绍:http://support.esrichina.com.cn/2011/0223/960 ...

随机推荐

  1. C语言学习记录（二）

    C语言学习记录(二) 一.知识要点(C语言概述) 1.C语言的发展历史和特点 C语言的发展历史 C语言最早在B语言的基础上开发出来,并于1972年在一台计算机上首次实现. C语言最开始只是为描述和实现 ...

  2. centons7.2 双网口聚合功能配置和验证

    1.启动网络管理器运行systemctl restart NetworkManager2.创建主备绑定连接 nmcli connection add con-name bond0 type bond ...

  3. 阿里云初始化，epel库，docker安装的一般步骤，和java8 升级 java11 的一些bug，无法显示验证码，等

    1. 反射异常 有些反射异常,不是自己代码的错而是一些框架调用的时候,所带来的,不好处理. 用压制输出的形式,1行为压制,2行为调试模式,输出所有的报错信息.这里用java.base / java.n ...

  4. 在windows如何下载android源码

    如链接https://blog.csdn.net/freekiteyu/article/details/70939672

  5. TP5--页面跳转

    //模拟登录 // $admin = 0; // if($admin != 10){ // //页面跳转 // $this->success('登录失败','login/index'); // ...

  6. SignalR 的应用

    一.应用场景: 在项目中有一个地方需要定时查询数据库是否有数据,如果有则显示在界面上. 二.可以使用ajax定时查询来做: var inter = window.setInterval(refresh ...

  7. SQL Server【提高】事务

    事务 事务是作为单个逻辑单元执行的一系列操作,它是一个不可分割的工作逻辑单元.它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行. 特性 原子性Atomicity 事务是一个完整的操作, ...

  8. ubuntu18 build opencv4 from source

    1 安装依赖 ## Install dependencies sudo apt -y install build-essential checkinstall cmake pkg-config yas ...

  9. C#中的ReferenceEquals、Equals以及==

    https://www.cnblogs.com/ArtofDesign/p/3615212.html   C#中有一共有四种相等性判断方法: //Object中定义的三个方法 public stati ...

  10. vivado2018.2封装普通IP模块

    将代码打包为一个IP模块 以FIFO代码为例:https://www.cnblogs.com/waqdgstd/p/15267726.html 1.打开向导 2.源文件和外围接口选择,这里不选AXI4 ...