<!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属性定义了页面上元素的堆叠顺序，只对定位元素（position属性值为relative、absolute、fixed或sticky的元素）有效。z-index值可以是整数、0或负整数。使用正值可以使元素在z轴方向上移动到较高位置，而使用...
例如，z-index并不适用于块级元素，只有在元素被定位之后，即position属性被设置为relative、absolute、fixed或sticky之后，z-index才会生效。此外，对于表格单元格、flex项目或者grid项目，z-index值也会被忽略。 ...
因此，要解决IE6的`z-index`问题，首先要确保需要调整堆叠顺序的元素设置了非`static`的`position`值。 其次，IE6的`z-index`计算基于包含块，而不是整个页面。这意味着只有在同一层级（拥有共同祖先，且该祖先的`...
首先，需要了解的是，当一个元素设置了position属性为非static（如relative、absolute、fixed等）时，该元素才会生成层叠上下文，此时它的z-index属性才能起作用。如果元素的position属性是static，那么即使设置了z-...
例如，如果三个元素都设置了position属性，并且它们的z-index分别为9999、500和1，那么具有最高z-index值（9999）的元素将位于最前面，而具有最低z-index值（1）的元素将位于最后面。 #### 实例代码 ```css #grey_...
dom结构：正常的实现方式很容易：因为B本身就在A的后面，当A和B都设置了position属性（非static），且没有设置z-index的时候，其层叠关系是后面的元素覆盖前面的元素，这样只需要给A-child设置z-index属性值即可。...
`z-index`仅适用于定位元素（即设置了`position`属性且不为`static`的元素）。如果你尝试在没有定位的元素上设置`z-index`，浏览器会忽略这个属性。同时，`z-index`只能应用于生成块级盒模型的元素（例如，行内元素...
当元素在同一父容器内并且position属性不是static时，z-index才生效。 UEditor作为一款嵌入式的编辑器，它的弹出窗口、工具栏等组件默认可能设置了一个较高的z-index，这可能导致在特定场景下覆盖了其他重要的页面...
在CSS布局中，元素重叠和`position`定位的`z-index`顺序是常见的问题，尤其是在复杂的网页设计中。本文将深入探讨这个问题，以便更好地理解和解决问题。 首先，我们需要理解元素的默认行为。在HTML文档中，元素按照...
负值的`z-index`元素会被放置在所有`z-index`为非负数的元素后面，同时也会位于那些没有设置堆叠上下文（即`position: static`和`z-index: auto`）的元素后面。 5. **总结** - 只有当`position`设置为`relative`, ...
通过上述内容，我们可以理解到，通过调整position和z-index属性，我们可以实现精细的页面布局控制。例如，我们可以让一个菜单始终固定在页面的顶部，也可以通过改变z-index值来调整页面元素的覆盖顺序。这些布局技巧...
在CSS布局中，元素的位置和重叠是一个关键概念，尤其涉及到`position`定位和`z-index`属性时，这些问题往往会让开发者感到困扰。本文将深入探讨元素重叠的背景知识，以及`position`定位下的`z-index`顺序。 首先，...
2. 具有`position`值为`relative`、`absolute`、`fixed`或`sticky`的元素，并且`z-index`不为`auto`。 3. `z-index`值为负的`<iframe>`元素。 4. `opacity`值小于1的元素（因为它们创建了一个独立的透明层叠上下文）...
在HTML和CSS中，每个具有`position`属性设置为`relative`, `absolute`, 或 `fixed`的元素都有一个Z-Index。默认情况下，元素按照它们在HTML文档中的顺序进行堆叠，但通过指定Z-Index，我们可以改变这一规则，使得...
具有较高`z-index`值的元素会覆盖具有较低`z-index`值的元素，前提是这些元素都在同一父容器内且拥有定位（position属性非static）。 在IE6中，`<select>`元素被当作一个特殊的元素处理，它会被放置在一个独立的层...
在实际应用中，正确理解和使用`position`和`z-index`可以实现复杂而精确的网页布局，如创建弹出框、浮动导航栏等效果。然而，过度依赖定位可能会导致布局变得难以维护，因此在设计时应适度使用，并结合其他布局技术...
这种情况下，改变外部父元素的position属性为absolute或者调整内部父元素的z-index，都可以解决z-index不工作的问题。 解决IE6下z-index不工作的问题，不仅需要理解CSS属性的基本概念，还需要掌握特定浏览器的渲染...
- `z-index`仅对设置了定位（`position`）属性的元素生效，包括`relative`、`absolute`、`fixed`和`sticky`等。 - 对于没有设置定位属性的元素，其`z-index`属性无效。 #### 三、实例解析 接下来，我们将根据...
在CSS中，z-index属性只能作用于定位元素，即那些position属性为relative、absolute或fixed的元素。当元素被设置为static时（也是position属性的默认值），其z-index属性将不会生效。这是因为在静态定位的元素上，...
`z-index`是用于控制元素在垂直于屏幕方向上的堆叠顺序，它在具有`position`值为`relative`、`absolute`或`fixed`的元素上起作用。 标题“bindtap点击无响应-zindex.rar”暗示了问题的关键在于`z-index`的使用导致...