<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<title>position</title>
<style type="text/css">
<!--
body{
font-size:12px;
margin:0 auto;
}
div#demo{
position:relative;
border:1px solid #000;
margin:50px;
top:-50px;
line-height:18px;
overflow:hidden;
clear:both;
height:1%;
}
div#sub{
position:absolute;
right:10px;
top:10px;
}
div.relative{
position:relative;
left:400px;
top:-20px;
}
div.static,div.fixed,div.absolute,div.relative{
width:300px;
}
div.static{
background-color:#bbb;
position:static;
}
div.fixed{
position:fixed;
background-color:#ffc0cb;
}
div.absolute{
background-color:#b0c4de;
}
div.relative{
background-color:#ffe4e1;
}
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
top:-50px;
left:50px;
z-index: 9999;
}
#grey_box_2 {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
top:-350px;
left:250px;
z-index: 10;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
top:-100px;
left:100px;
z-index: 500;
}
#blue_box_2 {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
top:-100px;
left:100px;
z-index: 500;
}
#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
top:-150px;
left:150px;
z-index: 1;
}
#gold_box_2 {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
top:-200px;
left:200px;
z-index: 1;
}
-->
</style>
</head>
<body>
<div id="demo">
<div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
<div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
<div class="fixed">对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
<div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
</div>
<div id="grey_box"></div>
<div id="blue_box"></div>
<div id="gold_box"></div>
<div id="gold_box_2">
<div id="blue_box_2"></div>
</div>
<div id="grey_box_2"></div>
</body>
</html>
分享到：
相关推荐
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
dom结构：正常的实现方式很容易：因为B本身就在A的后面，当A和B都设置了position属性（非static），且没有设置z-index的时候，其层叠关系是后面的元素覆盖前面的元素，这样只需要给A-child设置z-index属性值即可。...
position定位如果有重叠的时候，z-index愈大，就显示在最上面 此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...
position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au
第三部分：relative定位 第四部分：absolute定位 第五部分：重叠的元素--z-index属性 第六部分：脱离档流导致的问题
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种情况...
z-index属性简介 引用: z-index : auto | number auto：默认值。 number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小...z-index属性适用于定位元素（position 属性值为 relative 或 ab
最后将会介绍和position属性密切相关的z-index属性。 第一部分：position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。 如...
解决办法： 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先，其中包含的元素的z-index是相对于...上面的例子中，倘若将第一个div的z-index设置为-1，则无论p的z-index为多少，多会被下面的di
下面小编就为大家带来一篇ie6 z-index不起作用的完美解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。 1.第一种情况（z-index无论设置多高都不起作用情况）： 这种...
3D-Position_Project-Tool-for-Nuke.zip,使用“世界位置”和相机渲染的相机投影。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。 对于定位元素而言，z-index 意味着： 确定该元素在当前层叠上下文中的层叠级别...
文章目录一、跟笔者一起看下面实战中z-index的几种情况：二、设置基本的dom结构与样式，准备测试三、开始测试测试问题1：测试问题2：测试问题3：测试问题4：测试问题5：四、结论五、笔者致广大读者的话 今天笔者就与...
3D-Position_Mask-Tool-for-Nuke.zip,使用“世界位置”或“参考位置”渲染中包含的数据创建快速遮罩。,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及...
`position: relative;z-index: -1;`时，子控件无法点击
...
...