需求，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. Scp 免密拷贝

    为了图方便 想在更新主机服务的同时把应用同步到备机, 需做一下ssh 的公钥设置 详细见该链接 scp免密传输文件 - lucas-xie - 博客园 (cnblogs.com)

  2. Go语言格式化金额为3个一组隔开

    最近在Go语言项目上面遇到了一个金额相关的问题,想更加规范的将金额用逗号隔开3个分为一组,这样显示更专业一点,经过一番努力,找到这个下面这个插件,经过测试发现比较好用,特此分享出来. 第一步先下载一个 ...

  3. win7安装AutoCAD2019

    1.Win7专业版64位先安装SP1补丁 2.根证书下载 MicrosoftRootCertificateAuthority2011.cer 链接:http://go.microsoft.com/fw ...

  4. asp.net core 解决用户上传文件提示 System.UnauthorizedAccessException: Access to the path 'C:\Windows\TEMP\ASPNETCORE_e65c14f7-e337-493c-90ac-d49a48db7187.tmp' is denied.

    今天发布项目到服务器 上传文件突然提示 System.UnauthorizedAccessException: Access to the path 'C:\Windows\TEMP\ASPNETCO ...

  5. Ubuntu网络重置

    Ubuntu网络重置 >重置网络 sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager ...

  6. 像MIUI一样做Zabbix二次开发（3）——Zabbix深度定制的意义

    深度定制的意义 综合来讲,Zabbix是一个非常强大的监控平台,简单拿来完成监控一些Hosts,没有什么问题,而且,目前国内大部分客户都是这么做的,基本上是安装完后,网上找到一些相关模板,配置后把Ho ...

  7. Datax初使用

    为了掌握大数据采集技术,自学习了datax的使用 简介: DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.HDFS.Hive.OceanBase.H ...

  8. TypeScript Number

    TypeScript Number TypeScript 与 JavaScript 类似,支持 Number 对象. Number 对象是原始数值的包装对象. 语法 var num = new Num ...

  9. centos7部署elasticsearch-7.16.2分布式集群（此版本修复了log4j2漏洞）

    简介 Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分析引擎,能够解决不断涌现出的各种用例. 作为 Elastic Stack 的核心,它集中存储您的数据,帮助您发现意料之 ...

  10. 前端将JSON数据格式化显示

    很简单 1 formatJsonData(jsonData) { 2 var smapleDetailData = JSON.stringify(JSON.parse(jsonData), null, ...