CSS的z-index实例代码
发布时间：2012-02-25 13:48:24 作者：佚名 
我要评论
我要评论写了个最简单的DEMO，演示了3个DIV互相遮盖的情况。记住：z-index要配合position属性才有效
效果图：
全部代码：
复制代码
代码如下:<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS z-index demo - Edi</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
.box
{
width: 256px;
padding: 5px;
border: 1px solid #000;
margin: 20px;
height: auto;
}
#box1
{
background-color: #F4F4F4;
}
#box2
{
background-color: #FFC;
position: relative;
z-index: 1;
margin-top: -80px;
margin-left: 50px;
}
#boxinbox
{
background-color: #F00;
position: relative;
z-index: 2;
margin-left: -20px;
width: 80px;
}
</style>
</head>
<body>
<div class="box" id="box1">
<div>Tasks</div>
<div>
SharePoint 2010客户端开发身份验证，如果开发客户端运行的环境是在域环境中，
那么SharePoint是采取默认认证方式，如果不是域环境中的机器，那么就需要下面的认证方法。
<div id="boxinbox">HAHA</div>
</div>
</div>
<div class="box" id="box2">
<div>Defects</div>
<div>
开闭原则指的是一个软件实体应对对扩展开发，对修改关闭
(Software entities should be open for extension, but closed for modification)。
这个原则是说在设计一个模块的时候，应对使这个模块可以在不被修改的前提下被扩展，
换言之，应对可以不必修改源代码的情况下 改变这个模块的行为。
</div>
</div>
</body>
</html>
相关文章
- z-index最大值,最小值以及同值时层的高低，做了个测试z-index的最大值,有几个结论如下2009-05-28
- z-index属性简介 引用: z-index : auto | number auto：默认值。 number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对2009-05-29
CSS教程:元素层叠级别及z-index-CSS教程-网页制作-网页教学网
原文：http://rong179.blogbus.com/logs/24966909.html 声明 定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。 平台：win/I2008-10-17- 设置z-index时必须要固定位置，这样设置它的值时才能奏效（例如 position:absolute;）下面是示例代码，在ff3.5.5和ie5.5~ie8.0RC1中通过，大家可以尝试着不固定其位置试试2009-11-26
CSS教程:网页布局定位及z-index解释-CSS教程-网页制作-网页教学网
声明 定位元素： position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。 平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏2008-10-17- IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto2012-11-13
- 发现有时候真得多看看书,以前一直纳闷为什么有时候可以,有时候不可以,原来是这个原因.2011-03-23
- 可是真有些日子没有写DIV+CSS了，而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目)，所以这次开发中不可避免的碰见了几个问题，尤其是在IE下的 z-index 问题很有意思2013-01-09
CSS元素的层叠与z-index设置-CSS教程-网页制作-网页教学网
我们在文章的更新中，特别注重对新手的辅导，但webjx.com面对的是广大的开发人员，大家可能会遇到各种各样的问题，有些问题很不常见，或者应用的很少，但我们依然有必2008-10-17- 在这篇文章里，我们会准确的说明究竟什么是Z-index，它为什么会这么不为人所了解，并一起讨论一些关于它的实际使用中的问题。我们同时会描述一些会遇到的浏览器间的差异，2014-10-22
最新评论