<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. javascript与服务器3

    一, 带参数的XMLHTTP请求 1, 进行get请求 get请求最常见的是在浏览器地址栏中输入URL并打开页面时,这就是向服务器发送一个get请求. 它的限制是URL最大长度不能超过2048字符(2 ...

  2. hdu1231 最大连续子序列

    #include<stdio.h> #include<string.h> #define maxn 10010 int a[maxn],dp[maxn]; int main() ...

  3. Maven 教程

    Maven 教程 序:几次对Maven 的学习,都因为各种原因 而中途切断了,再一次学习的时候,又不得不重新开始,结果发现 又不记得步骤 又找不到对应的文档.别人写的再好,终究比不过自己亲手实践的得出 ...

  4. 【POJ 2250】Compromise(最长公共子序列LCS)

    题目字符串的LCS,输出解我比较不会,dp的时候记录从哪里转移来的,之后要一步一步转移回去把解存起来然后输出. #include<cstdio> #include<cstring&g ...

  5. 【HDU 1003】 Max Sum

    题 题意 需要在o(n)时间内,求最大连续的子序列的和,及其起点和终点. 分析 一种方法是一边读,一边维护最小的前缀和 s[i] ,然后不断更新 ans = max(ans,s[j] - s[i]), ...

  6. 蝙蝠算法-python实现

    BAIndividual.py import numpy as np import ObjFunction class BAIndividual: ''' individual of bat algo ...

  7. opencv笔记5:频域和空域的一点理解

    time:2015年10月06日 星期二 12时14分51秒 # opencv笔记5:频域和空域的一点理解 空间域和频率域 傅立叶变换是f(t)乘以正弦项的展开,正弦项的频率由u(其实是miu)的值决 ...

  8. Linux中断技术、门描述符、IDT(中断描述符表)、异常控制技术总结归类

    相关学习资料 <深入理解计算机系统(原书第2版)>.pdf http://zh.wikipedia.org/zh/%E4%B8%AD%E6%96%B7 独辟蹊径品内核:Linux内核源代码 ...

  9. 高德地图3D版的使用方法

    坐标拾取器: http://lbs.amap.com/console/show/picker 其经纬度与LatLng()方法中的经纬度是对调的 SDK和实例下载: http://lbs.amap.co ...

  10. hdu 1202 The calculation of GPA

    感觉本题没有什么好解释的,已知公式,直接编程即可. 1.统计所有 科目的学分 得到总学分 2.统计所有 成绩对应的绩点*对应的学分即可(如果成绩==-1直接continue,不进行统计),得到总绩点. ...