需求，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. 解决habbybase 操作hbase报错TTransportException（type=4,message=’TSocket read 0 bytes）

    1.确认集群的协议是否一致,在连接的时候,改成一致的.例如集群配置的是TFramedTransport,TCompactProtocol 时 改成 connection = happybase.Con ...

  2. vagrant搭建centos7

    准备工作 下载安装vagrant https://releases.hashicorp.com/vagrant/2.3.4/vagrant_2.3.4_windows_amd64.msi 选择自己需要 ...

  3. Oracle的Pctfree

    1.创建一张表 create table student( student_id number ); 但是在pl/sql中查看却是以下的建表语句: -- Create table create tab ...

  4. git常见问题集合

    注1:问题总结来自于实际使用,关于搜到的资料链接一并粘贴; 场景1:GIT本地代码处于detached HEAD的情况(又称游离状态)的解决办法; 问题:有时候git由于一些操作的问题出现了detac ...

  5. Docker学习笔记-01 初步了解

    1. 理念:将应用打成镜像,通过镜像成为运行在Docker容器上面的实例,而 Docker容器在任何操作系统上都是一致的,这就实现了跨平台.跨服务器.只需要一次配置好环境,换到别的机子上就可以一键部署 ...

  6. 微信小程序循环数组展示数据点击当前改变当前按钮状态

    Html: <view class="container" wx:for="{{arr}}" wx:key="*"> //这里循 ...

  7. DUBBO消费端Reference初始化

    1. ReferenceBean.java ReferenceBean.java 继承 ReferenceConfig.java, 主要的Reference初始化逻辑都在ReferenceBean的g ...

  8. 【翻译】了解Flink-数据管道和ETL -- Learn Flink - Data Pipelines & ETL

    目录 无状态转换 map() flatmap() keyed 流 keyBy() keys计算 keyed流上的聚合 (Implicit)状态 reduce() 和其他聚合器 有状态的Transfor ...

  9. 《SAP MDM主数据管理》.pdf

    <SAP MDM主数据管理>.pdf 有需要的联系 wx :erpworld

  10. android HttpURLConnection ,HttpClient设置Cookie

    上一阶段项目设计使用cookie信息实现登录访问功能,在实现过程遇到一些问题,下面整理一下: 首先,client想使用cookie,必须访问一次server从会话中获取cookie信息,然后在设置回去 ...