<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

</style>

</head>

<body>

<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index 仅能在定位元素上奏效（例如 position:absolute;）！-->

<div style='position:relative; width:500px; height:500px;'>

<div style='position:absolute; z-index:2; width:300px; height:300px; left:0px; top:0px; background-color:red;'></div>

<div style='position:absolute; z-index:3; width:200px; height:200px; left:0px; top:0px;background-color:green;''></div>

</div>

</body>

</html>

效果：

div悬浮的更多相关文章

  1. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  2. 【CSS】非常简单的css实现div悬浮页面底部

    <div id="demo_div"></div> <style> #demo_div{ left:; position: fixed; bot ...

  3. jquery中div悬浮嵌套按钮效果

    <div class="btn_sure_cai" style="margin-left: 0px;" onmouseover="show_hi ...

  4. div悬浮窗口设计来完成注册页面

    login.jsp页面 <script type="text/javascript" src="js/register.js"></scrip ...

  5. 怎么让一个div 悬浮在另一个div上

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. div悬浮在屏幕的中间及点击按钮关闭弹出框

    #fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px ...

  7. div 悬浮

    一个小需求,鼠标移动一个产品那, 显示这个产品的具体信息 代码如下: <a href="javascript:void(0);" onclick="frameSea ...

  8. 当div有边框图片的时候，怎么实现内部的p标签的水平和垂直居中

    <!-- 这里a.png必须是四边的框都有,限制,这个时候做里边文字的居中,首先在这个里边在套一个div悬浮(absolute或者float:left),然后在这个div(必须设宽高和margi ...

  9. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. java.lang.IllegalArgumentException: 'sessionFactory' or 'hibernateTemplate' is required

    java.lang.IllegalArgumentException: 'sessionFactory' or 'hibernateTemplate' is required 严重: Exceptio ...

  2. 【VC++技术杂谈007】使用GDI+进行图片格式转换

    本文主要介绍如何使用GDI+对图片进行格式转换,可以转换的图片格式为bmp.jpg.png. 1.加载GDI+库 GDI+是GDI图形库的一个增强版本,提供了一系列Visual C++ API.为了使 ...

  3. fir.im Weekly - 让 iOS 应用更加安全

    攻易防难,关于 iOS 应用安全看起来有些神秘.iOS Security , 源于@吴发伟_则平博客翻译的关于iOS安全的一系列文章,现在站点已经系统收集了大量关于 iOS 逆向.安全.反编译.静动态 ...

  4. 分区函数Partition By的与row_number()的用法以及与排序rank()的用法详解(获取分组(分区)中前几条记录)

    partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没有指 ...

  5. defered,promise回顾

    defered,promise回顾 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_o ...

  6. [C#] Socket 通讯，一个简单的聊天窗口小程序

    Socket,这玩意,当时不会的时候,抄别人的都用不好,简单的一句话形容就是“笨死了”:也是很多人写的太复杂,不容易理解造成的.最近在搞erlang和C的通讯,也想试试erlang是不是可以和C#简单 ...

  7. MongoDB 搭建副本集

    副本集(Replica Set)是一组MongoDB实例组成的集群,由一个主(Primary)服务器和多个备份(Secondary)服务器构成.通过Replication,将数据的更新由Primary ...

  8. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  9. 在 ML2 中配置 Vlan Network- 每天5分钟玩转 OpenStack（93）

    上一节我们学习了 Neutron Vlan Network 的原理,今天讨论如何在 ML2 配置中 enable 它. 首先在 /etc/neutron/plugins/ml2/ml2_conf.in ...

  10. 窥探Swift之别具一格的Struct和Class

    说到结构体和类,还是那句话,只要是接触过编程的小伙伴们对这两者并不陌生.但在Swift中的Struct和Class也有着令人眼前一亮的特性.Struct的功能变得更为强大,Class变的更为灵活.St ...