<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. jQuery1.4源码解读

    来吧, 慢慢折腾吧 总结一下: jq1.4挺简单的, 正则写的不多, 看的都懂, 多写一些 三目写法到底要不要 特殊的地方的注释一定要有 /*! * jQuery JavaScript Library ...

  2. Hibernate-缓存

    Hibernate是一个持久层框架,经常访问物理数据库.为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在 ...

  3. JAVA开发之Eclipse常用的快捷键

    Eclipse是我们常用的java开发编辑器,它支持很多有用但又不太为人所知的快捷键组合.通过这些组合快捷键我们可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.甚至有一次笔者去参加一个IT ...

  4. CentOS/Redhat VNC 服务

    # yum install vnc-server vnc* (CentOS 5.x)# yum install tigervnc-server tigervnc (CentOS 6.x) [root@ ...

  5. BZOJ-2875 随机数生成器 矩阵乘法快速幂+快速乘

    题目没给全,吃X了... 2875: [Noi2012]随机数生成器 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 1479 Solved: 829 ...

  6. 【bzoj1005】 HNOI2008—明明的烦恼

    http://www.lydsy.com/JudgeOnline/problem.php?id=1005 (题目链接) 题意 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多 ...

  7. 微信支付（APP）集成时碰到的问题（.net提示“无权限”、iOS跳转到微信支付页面中间只有一个“确定”按钮）

    直入主题之前,请容我吐槽一下微*的官方东西:ASDFQ%#$%$#$%^FG@#$%DSFQ#$%.......:吐槽玩了!大家心照就好. 要完成手机APP跳转到微信的APP进行微信支付,需要进行如下 ...

  8. Linux Kernel Synchronization && Mutual Exclusion、Linux Kernel Lock Mechanism Summarize

    目录 . 内核锁机制 . 同步与互斥 . 锁定内存总线原子操作 . 信号量 . 自旋锁 . RCU机制 . PERCPU变量 . 内存和优化屏障 . 读者/写者锁 . 大内核锁 . 互斥量 1. 内核 ...

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

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

  10. Advice for applying Machine Learning

    https://jmetzen.github.io/2015-01-29/ml_advice.html Advice for applying Machine Learning This post i ...