<html>
<head>
<style>
/* 静态 */
#ct1{
background:green;
height:200px;
width:200px;
margin-bottom:10px;
}
#subCt1{
position:static;
width:50%;
height:50%;
background:yellow;
}
/* 相对 */
#ct2{
background:green;
height:200px;
width:200px;
margin-bottom:10px;
}
#subCt2{
position:relative;
width:50%;
height:50%;
top:50%;
left:50%;
background:yellow;
}
/* 绝对 */
#ct3,#ct4{
background:green;
height:200px;
width:200px;
position:relative;
margin-bottom:10px;
}
#subCt3,#subCt4{
position:absolute;
height:50%;
width:50%;
top:50%;
left:50%;
background:yellow;
}
#ct4 p{
position:relative;
z-index:1;
}
#subCt4{
z-index:0;
}
</style>
</head>
<body>
<h1>静态定位</h1>
<div id="ct1">
<div id="subCt1">
</div>
</div>
<h1>相对定位</h1>
<div id="ct2">
<div id="subCt2">
</div>
<p>
它偏移了，原来的位置还占用着!而且还把俺给覆盖了……
</p>
</div>
<h1>绝对定位</h1>
<div id="ct3">
<div id="subCt3">
</div>
<p>
它偏移了，原来的位置让出来了!接下来看下面会不会把俺给覆盖了<br/>
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
呃——还是被覆盖了……
</p>
</div>
<h1>z-index</h1>
<div id="ct4">
<div id="subCt4">
</div>
<p>
它偏移了，原来的位置让出来了!接下来我不再想被覆盖了，看我z-index的厉害<br/>
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
看下面，有覆盖了没......<br />
呵——覆盖不了吧……
原来z-index只对定位元素有效呀!
</p>
</div>
</body>
分享到：
相关推荐
Css中z-index的实例分折.可以作为CSS Z-INDEX研究的实例。很小很简洁。
写了个最简单的DEMO，演示了3个DIV互相遮盖的情况。记住：z-index要配合position属性才有效
10.3.3 z-index空间位置 10.4 定位实例一：轻轻松松给图片签名 10.5 定位实例二：文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.1.1 将页面用div分块 11.1.2 设计各块的位置 ...
这是一个巧妙的解决方法，用于在 CSS 中堆叠上下文限制（z-index、overflow:hidden 等） 这是一个 CommonJS 模块，你需要使用 。 用法 每个Popup实例都是一个简单的元素，具有固定的定位（ position:fixed ）。 此...
margin实例--设置层与层的距离.html 设置层与层的距离。 实例手把手--DIV+CSS结合.html 演示实例手把手--DIV+CSS结合。 第21章（源代码\第21章） 示例描述：本章演示内补丁用法。 padding基本语法和用法....
不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。 在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一种表现，当然要看到近大远小的...
1、z-index 重叠顺序属性 2、position:relative和position:absolute设置对象属性为可定位（可重叠） 3、left right top bottom绝对定位具体位置设置 配合的样式 1、css width 2、css height 3、background 为了...
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等 效果如图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <...
4.3.3 z-index空间位置 4.4 CSS排版观念 4.4.1 将页面用div分块 4.4.2 设计各块的位置 4.4.3 用CSS定位 4.5 排版实例：我的博客 4.5.1 设计分析 4.5.2 排版构架 4.5.3 导航与Banner ...
4.3.3 z-index空间位置 4.4 CSS排版观念 4.4.1 将页面用div分块 4.4.2 设计各块的位置 4.4.3 用CSS定位 4.5 排版实例：我的博客 4.5.1 设计分析 4.5.2 排版构架 4.5.3 导航与Banner...
实现的效果图如下： 示例代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border制作书签（图形）</title> <style>... z-index:
本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下： 弹出层透明背景加框的常用样式和结构如下: 代码如下:.alertMessageBg{ position:fixed; _position:absolute; width...
利用纯CSS可以做出千变万化的效果,特别是CSS3的引入更让更多的效果可以做出来....然后再加入一些阴影和翻转的属性,最近使用z-index属性来改变图片的叠加顺序. 在开始之前先下载这些清爽的图片. Iguassu Falls 006 by
在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看其结构比较简单，就拿它开刀吧！ 在cssplay网站看到有一组CSS像素画，于是也想摩仿一下，于是在网络上找到一组头像图标，看...
效果图 在网上查阅相关资料后，发现目前的动态渐变色边框的实现... 现在在这个空白区域加一个比父元素更大，背景为渐变色的盒子，将层级设置为最低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性...
本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能。分享给大家供大家参考，具体如下： HTML部分： 点击除开div的区域可以弹出弹窗 <div id=cover></div> 点击除开div和弹窗的区域可以关闭弹窗 ...
话不多说，请看实例 ... <div class=return_top></div> 2、css样式 .return_top{ width: 50px; height: 50px;... background: url(../images/lanren.gif) no-repeat ... z-index: 99; } 3、js效果 [removed] $(functi