<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>z-index</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="block1">第一个div</div>
<div id="block2">第二个div</div>
<div id="block3">第三个div</div>
</body>

css样式：

@charset "utf-8"; /* CSS Document */

div {  width:200px; height:60px; position:absolute;  border:1px dashed #0000ff; }

#block1 {  left:20px; top:20px; z-index:1;  background-color:#99ccff; }

#block2 {  left:80px; top:40px; z-index:3;  background-color:#ffff66; }

#block3 {  left:60px; top:60px; z-index:-1;  background-color:#ff9900; }

css+div绝对定位的更多相关文章

  1. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  2. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  3. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  4. css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  5. 精通CSS+DIV基础总结（三）

    Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...

  6. CSS+DIV定位分析(relative,absolute,static,fixed)

    在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...

  7. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  8. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  9. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

随机推荐

  1. iOS开发小技巧--设置按钮圆角

    方法一:代码设置 方法二:通过图形化界面

  2. [转]window.opener用法

    window.opener 实际上就是通过window.open打开的窗体的父窗体. 比如在父窗体parentForm里面 通过 window.open("subForm.html" ...

  3. PHP配置，php.ini以及覆盖问题

    在部署一个cms项目到服务器上的时候,因为cms的模板比较老,服务器上用的php是5.3.3版(大于5.3,可以认为是新的),有些页面会显示"deprecated"类别的错误信息. ...

  4. jquery无限级下拉框

    非原创,已修改成通用版,效果如下: 下载:http://files.cnblogs.com/files/EasonJim/jquery.menu.rar 项目相关地址 源码:https://githu ...

  5. BZOJ2301 莫比乌斯反演

    题意:a<=x<=b,c<=y<=d,求满足gcd(x,y)=k的数对(x,y)的数量         ((x,y)和(y,x)不算同一个) 比hdu1695多加了个下界,还有 ...

  6. 关于bash的shellshock漏洞

    这一漏洞的描述如下: Shellshock (CVE-2014-6271, CVE-2014-6277, CVE-2014-6278, CVE-2014-7169, CVE-2014-7186, CV ...

  7. The AndroidManifest.xml File

    manifest (船运的)载货清单 http://www.android-doc.com/guide/topics/manifest/manifest-intro.html Every applic ...

  8. sdk和ndk

    让我先来说说android sdk (Android Software Development Kit, 即Android软件开发工具包)可以说只要你使用java去开发Android这个东西就必须用到 ...

  9. mysql prepare语句使用

    语法 PREPARE statement_name FROM sql_text /*定义*/ EXECUTE statement_name [USING variable [,variable...] ...

  10. 可输入自动匹配Select——jquery ui autocomplete

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...