<!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. C#4语法

    在C# 4.0中可以通过委托某个成员的实现来实现一个接口,例如下面的代码: public class Foo : IList { private List _Collection implements ...

  2. 循序渐进，了解Hive是什么！

    一直想抽个时间整理下最近的所学,断断续续接触hive也有半个多月了,大体上了解了很多Hive相关的知识.那么,一般对陌生事物的认知都会经历下面几个阶段: 为什么会出现?解决了什么问题? 如何搭建?如何 ...

  3. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...

  4. Linux核心源码阅读方法

    首次阅读Linux4.0.5内核源代码时,一脸茫然,它的代码不仅复杂,而且庞大,找不到从哪里开始阅读. 通常Linux会有以下目录 arch 子目录包括所有和体系结构相关的核心代码.它还有更深的子目录 ...

  5. Trace1：Default Trace

    sql server trace 是一个轻量级的追踪工具,对追踪数据库的行为很有用,因此,sql server内置一个trace(default trace). 1,sql server 内置Defa ...

  6. WaitType：ASYNC_NETWORK_IO

    官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...

  7. WebView 与PC机Chrome配合调试

    参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Bro ...

  8. 前端学PHP之数组函数

    × 目录 [1]键值操作 [2]记数[3]回调函数[4]组合[5]栈和队列[6]顺序 前面的话 PHP中的数组功能非常强大,数组处理函数有着强大.灵活.高效的特点.PHP5提供了近100个操作数组的系 ...

  9. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

  10. 前端编码风格规范之 HTML 规范

    HTML 规范 文档类型 推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>. (建议使用 text/html 格式的 HTML.避免使用 XHTML.XHTML 以及 ...