<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属性详解与应用 在网页布局设计中，元素之间的层级关系至关重要，它决定了哪些元素在页面上看起来“更靠前”。这便是z-index属性发挥作用的地方。本文将深入探讨CSS中的z-index属性，解析其工作...
### CSS中的Z-Index属性详解 #### 一、引言 在网页布局设计中，元素之间的堆叠顺序是非常重要的一个方面。特别是在复杂的页面结构中，如何控制这些元素的前后顺序，确保用户能够按照设计师的意图浏览信息，是前端...
以下是与z-index相关的知识点总结： 1. position属性：position属性指定了一个元素的定位类型，它可以是以下四个值之一： - static（默认值）：元素按照正常的文档流进行排列。 - relative：元素按照正常的文档流...
在网页设计和开发中，`z-index` 是一个非常重要的CSS属性，用于控制元素的堆叠顺序。在多个具有绝对定位（`position: absolute`）或固定定位（`position: fixed`）的元素重叠时，`z-index` 决定了哪个元素在前面，...
#### 四、层叠顺序与Z-index属性 当多个绝对定位元素相互重叠时，可以通过`z-index`属性来控制它们的堆叠顺序。`z-index`属性只适用于定位元素（`relative`、`absolute`、`fixed`），对于非定位元素无效。 - **...
适用人群：具有一定Web前端基础知识的开发者，特别适用于那些需要深入理解和熟练应用CSS定位机制的设计与开发人员。 使用场景及目标：本材料旨在提升使用者对CSS不同定位技术的认识，并能在复杂页面布局任务时快速...
4. **定位(positioning)**：掌握相对定位(relative)、绝对定位(absolute)和固定定位(fixed)的区别与应用场景，以及如何通过z-index来控制元素的层级。 5. **响应式设计**：通过媒体查询@media，学习如何根据不同...
这个问题主要涉及到浏览器的层叠上下文（CSS Z-Index）和`iframe`的渲染机制。本文将详细探讨这个问题的成因，并提供几种解决方案。 ### 1. 层叠上下文理解 在HTML页面中，每个元素都有一个隐含或显式的`z-index`...
本文将深入探讨CSS绝对定位属性`absolute`的用法，并提供实例来帮助理解。 首先，理解`position`属性是至关重要的。这个属性决定了元素如何在页面上定位。当`position`的值设为`absolute`时，元素就进入了绝对定位...
此外，可能还涉及到了`display`、`position`和`z-index`属性来控制菜单的展开与隐藏、定位以及层级关系。 在学习这些实例时，要注意观察和理解每一项菜单是如何响应用户操作的，分析其CSS代码结构，找出实现特定...
绝对定位元素可以堆叠，堆叠顺序由`z-index`属性控制，数值越大，元素越位于顶层。负值的`z-index`在Firefox中可能不受支持。 形象地说，相对定位就像将西瓜在水桶中挪动，但水桶的位置仍会影响西瓜；而绝对定位则...
绝对定位元素即使z-index值很高，如果其设置相对定位的父元素没有设置z-index值的话，其可能（这种可能性当然是布局存在遮盖的时候）会被后面设置了相对定位的元素遮挡（即使后面的相对定位的元素没有设置z-index值...
6. **定位**：掌握static、relative、absolute和fixed四种定位方式，以及z-index属性控制元素的堆叠顺序。 7. **CSS预处理器**：如Sass、Less和Stylus等，它们提供变量、嵌套规则、混合、函数等功能，让CSS编写更...
在设计复杂的布局时，可能需要结合使用 `z-index` 控制元素的堆叠顺序。 10. **交互性**：`CSS` 还可以增加交互性，如鼠标悬停效果、点击后的变化等。这通常通过伪类选择器如 `:hover`、`:active` 实现。 这个...
3. 层叠与显示顺序：`z-index`属性控制元素的堆叠顺序，决定哪个元素覆盖另一个元素。 4. 响应式设计：通过媒体查询（`@media`规则），可以实现根据不同设备屏幕尺寸改变布局的效果。 五、实例应用 1. 导航栏：使用...
7. **Z-index**：在多层元素叠加时，z-index属性决定元素的前后顺序，用于控制元素的覆盖关系。 8. **FlexGrow, FlexShrink, FlexBasis**：这三个属性是Flexbox布局中的关键，用于控制元素在容器内的伸缩行为。 9....
- **层叠定位属性**：`z-index`属性用于控制重叠元素的堆叠顺序。 #### 定位属性的应用 - **页面的制作流程和整体分析**：从设计稿到实现的全过程。 - **相对定位**：相对于原始位置移动。 - **固定定位**：相对于...
3. **定位机制**：学习CSS的定位机制，如静态、相对、绝对和固定定位，以及如何使用`z-index`来管理元素的堆叠顺序。 4. **响应式设计**：重点讲解CSS与媒体查询的结合，这是创建适应不同设备屏幕大小的响应式网站...
本章探讨了绝对定位和相对定位，以及z-index在层叠上下文中的作用。实例展示了如何通过定位技术实现复杂布局，如悬浮导航栏和响应式设计的基础。 第4章：响应式设计 随着移动设备的普及，响应式设计成为网页开发的...