需求，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. Vue2 element-ui组件二封-表单组件-效果展示

    vue2已经落后了? 不着急, vue3的也在写的过程中, 只是发出来vue2的一些组件 系列说明: > 编写原因 vue2在很多人眼里已经快过时了, 而我一直想写一些总结, 但是从两年前到现在 ...

  2. 如何完整卸载sketchup草图大师？

    如何完整卸载sketchup草图大师?完全彻底卸载删除干净sketchup各种残留注册表和文件的方法和步骤.如何卸载sketchup呢?有很多同学想把sketchup卸载后重新安装,但是发现sketc ...

  3. PIL修改图像

    PIL修改图像 像素:最小物理单元 pixel 分辨率:1024*980 可以表征 图像分辨率 或者350dpi 每英寸 350个dot表征分辨率 调整图像分辨率 from PIL import Im ...

  4. 【阿里云ACP】-04（负载均衡SLB、弹性伸缩AS内容分发、网络与VPC）

    阿里云例题介绍-CDN F公司新推出一款手机APP,将安装包链接挂在公司的官网(基于云服务器ECS实例)进行下载(安装包大小:6Mb),上线前两个月下载速度还能接受.自从上周公司在CCTV做了一次广告 ...

  5. Centos7 安装Seata，注册中心选择nocas

    前言 1.什么是分布式事务,分布式事务包含哪些角色 分布式事务主要包含,事务参与者,事务管理者,资源服务器三个角色.分布式事务是指着三个角色分别位于不同的分布式系统的不同节点之上.简单的说,就是一次大 ...

  6. GIT迁移仓库地址时如何保留分支和历史记录

    需求背景 GIT仓库(GitLab)所在服务器因某些原因要关停,相关服务需转移到另外一台机器上. 操作步骤 # clone项目 git clone --mirror http://192.168.12 ...

  7. Finance财务软件（支持Excel模板打印专题）

    我们可以修改模板文件./service/PrintTemplate/凭证打印模板_v1.xlsx 模板中的字段对应 2010_upgrade_01.sql 中的存储过程sp_voucher_print ...

  8. MogDB 学习笔记之 --exchange partition

    # 概念描述MogDB 提供了从分区交换的功能,如单表转化到一个分区中基本语法:ALTER TABLE...EXCHANGE PARTITION数据库版本# 测试验证## 1.环境准备``` miao ...

  9. 【5】python之基础语法

    1.编码格式 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: cp-1252 ...

  10. 统计学习导论之R语言应用（三）：线性回归R语言代码实战

    统计学习导论(ISLR) 参考资料 The Elements of Statistical Learning An Introduction to Statistical Learning 统计学习导 ...