<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. hdu1520 树形dp

    树形dp入门,在树上进行dp. 状态转移方程: dp[i][0] = max(dp[j][0], dp[j][1]);//i为j的上司 并且i不来 dp[i][1] = dp[j][0];//i来了 ...

  2. Spring-如何实现事物管理的

    事务的实现方式 实现方式共有两种:编码方式:声明式事务管理方式.基于AOP技术实现的声明式事务管理,实质就是:在方法执行前后进行拦截,然后在目标方法开始之前创建并加入事务,执行完目标方法后根据执行情况 ...

  3. SQLServer复制表

    把a的表结构复制到a1表,1＝2不复制数据,如果要复制数据,就不要whereselect * into a1 from a where 1=2注意:这种方式不能复制主键.索引等信息如果要全部复制,只能 ...

  4. HDU1698 Just a Hook

    Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of t ...

  5. Linux—fork函数学习笔记

    fork()函数 在赋值语句pid = fork();之前,只有一个进程在执行这段代码,但在这条语句之后,就变成两个进程在执行了,这两个进程的代码部分完全相同.> 两个进程中,原先就存在的那个被 ...

  6. Linux 线程（进程）数限制分析

    1.问题来源公司线上环境出现MQ不能接受消息的异常,运维和开发人员临时切换另一台服务器的MQ后恢复.同时运维人员反馈在出现问题的服务器上很多基本的命令都不能运行,出现如下错误:2.   初步原因分析和 ...

  7. LINUX下为ORACLE数据库设置大页--hugepage

    在Linux中配置hugepage可以提高oracle的性能,减少oracle sga的页交换,类似于aix中的lagepage. 为什么 使用大页? LINUX内存的默认块大小是4K如果SGA为:1 ...

  8. PHP 7.1 新特性一览

    可空类型主要用于参数类型声明和函数返回值声明.主要的两种形式如下:<?phpfunction answer(): ?int  {   return null; //ok}function ans ...

  9. 详细解读MySQL中的权限

    一.前言 很多文章中会说,数据库的权限按最小权限为原则,这句话本身没有错,但是却是一句空话.因为最小权限,这个东西太抽象,很多时候你并弄不清楚具体他需要哪 些权限. 现在很多mysql用着root账户 ...

  10. vs配置

    每次遇到vs配置都要让我头疼一段时间,对于某些不太清楚,有时自己试着配置,能运行起来就行,下次又忘了咋陪的了,其中配置的东西真心多. 1.输出目录这样配置../../Bin/Server/ 这个路径是 ...