- CSS 教程
- CSS - 主页
- CSS - 简介
- CSS - 语法
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 边距
- CSS - 列表
- CSS - 填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS-Clearfix
- CSS-浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 翻译
- CSS - 高度
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS-根
- CSS - 盒子模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS 高级
- CSS-弹性盒
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 媒体类型
- CSS - 分页媒体
- CSS-听觉媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - 重要
- CSS3 教程
- CSS3 - 教程
- CSS3 - 圆角
- CSS3 - 边框图像
- CSS3 - 多背景
- CSS3 - 颜色
- CSS3 - 渐变
- CSS3 - 阴影
- CSS3 - 文本
- CSS3 - 网页字体
- CSS3 - 二维变换
- CSS3 - 3D 变换
- CSS3 - 动画
- CSS3 - 多列
- CSS3 - 用户界面
- CSS3 - 盒子尺寸
- CSS 响应式
- CSS - 响应式网页设计
- CSS 资源
- CSS - 有用的资源
- CSS - 讨论
CSS - z 索引
CSS z-index 属性
CSS z-index属性用于控制网页中元素在同一堆叠上下文中重叠时的堆叠顺序。z-index 值较高的元素出现在值较低的元素前面。
下图演示了 z-index 布局以供参考:
z-index 属性可与嵌套在其他定位元素内部的定位元素一起使用。
句法
CSS 允许以多种方式设置元素的 z-index 属性。让我们检查所有可能的可用语法来设置元素的 z 索引。
关键词值
默认值。堆栈顺序与父元素的堆栈顺序相同。
z-index: auto;
整数值
正整数或负整数。它将元素的堆栈级别设置为给定值。较低的值将具有较低的优先级,并且元素将位于其他元素后面的一层。
z-index: 0; z-index: 5; z-index: 100; z-index: -1;
适用于
所有定位元素。
DOM语法
object.style.zIndex = "2";
CSS z-index 自动
CSS z-index: auto将元素的 z-index 设置为其父元素的堆栈顺序。它是 z-index 属性的默认值。
例子
这是一个例子 -
<html> <head> <style> .box1 { position: absolute; height: 200px; width: 280px; background-color: #f0baba; z-index: auto; text-align: center; padding: 3px; left: 10px; top: 10px; } .box2 { position: absolute; height: 120px; width: 200px; background-color: #eae98f; z-index: 1; text-align: center; padding: 5px; margin: 20px; left: 30px; top: 30px; } p { margin-top: 250px; } </style> </head> <body> <p>The element with z-index value of auto appears behind the element with the z-index value of 1.</p> <div class="box1"> <span>CSS z-index: auto</span> <div class="box2"> <span>CSS z-index: 1</span> </div> </div> </body> </html>
CSS z-index - 正整数
CSS z-index 属性可以有一个正整数值。在堆叠顺序中,具有较高整数值的元素将出现在具有较低值的元素之上。
例子
这是一个例子 -
<html> <head> <style> .box1 { position: absolute; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; left: 10px; top: 10px; } .box2 { position: absolute; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px; } .box3 { position: absolute; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 20px; left: 50px; top: 50px; } p { margin-top: 250px; } </style> </head> <body> <p>The element with z-index value of 1 appears behind the element with the z-index value of 2 and 3.</p> <div class="box1"> CSS z-index: 1 </div> <div class="box2"> CSS z-index: 2 </div> <div class="box3"> CSS z-index: 3 </div> </body> </html>
CSS z-index - 负整数
您还可以对 z-index 属性使用负整数值。具有负 z-index 值的元素将堆叠在具有较高 z-index 值的元素下方。
例子
这是一个例子 -
<html> <head> <style> .box1 { position: absolute; height: 200px; width: 280px; background-color: #f0baba; z-index: -3; text-align: center; padding: 3px; left: 10px; top: 10px; } .box2 { position: absolute; height: 140px; width: 220px; background-color: #eae98f; z-index: -2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px; } .box3 { position: absolute; height: 90px; width: 160px; background-color: #b7c8ae; z-index: -1; text-align: center; padding: 5px; margin: 20px; left: 50px; top: 50px; } p { margin-top: 250px; } </style> </head> <body> <p>The element with z-index value of -3 appears behind the element with the z-index value of -2 and -1.</p> <div class="box1"> CSS z-index: -3 </div> <div class="box2"> CSS z-index: -2 </div> <div class="box3"> CSS z-index: -1 </div> </body> </html>
CSS z-index 宽度位置:粘性
以下示例演示了如何使用z-index属性来控制具有position:sticky属性的元素的堆叠顺序,以便它们在页面滚动时保持固定位置 -
<html> <head> <style> .box1 { position: sticky; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 80px; } .box2 { position: sticky; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 40px; top: 200px; } .box3 { position: sticky; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 70px; } </style> </head> <body> <p>Move cursor upward to see the effect.</p> <div class="box1"> CSS z-index: 1 </div> <div class="box2"> CSS z-index: 2 </div> <div class="box3"> CSS z-index: 3 </div> </body> </html>
CSS z-index 宽度位置:固定
以下示例演示了如何使用z-index属性使元素在用户向下滚动时保持在内容顶部,即使它具有position :fixed属性 -
<html> <head> <style> .container { position: relative; height: 350px; } .box1 { position: fixed; height: 200px; width: 280px; background-color: #f0baba; z-index: -3; text-align: center; padding: 3px; left: 10px; top: 10px; } .box2 { position: fixed; height: 140px; width: 220px; background-color: #eae98f; z-index: -2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px; } .box3 { position: fixed; height: 90px; width: 160px; background-color: #b7c8ae; z-index: -1; text-align: center; padding: 5px; margin: 20px; left: 50px; top: 50px; } h3 { margin-top: 320px; } </style> </head> <body> <h3>Scroll down the content to see the effect.</h3> <div class="container"> <div class="box1"> CSS z-index: -3 </div> <div class="box2"> CSS z-index: -2 </div> <div class="box3"> CSS z-index: -1 </div> </div> </body> </html>
CSS z-index 宽度位置:静态
以下示例显示z-index属性不会影响具有position: static属性的元素的堆叠顺序 -
<html> <head> <style> .box1 { position: static; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 10px; } .box2 { position: static; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px; } .box3 { position: static; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 50px; top: 50px; } </style> </head> <body> <p>The z-index property has no effect on the stacking order of elements if the position property is set to static.</p> <div class="box1"> CSS z-index: 1 </div> <div class="box2"> CSS z-index: 2 </div> <div class="box3"> CSS z-index: 3 </div> </body> </html>
CSS z-index 宽度位置:相对
该示例显示,当元素具有position:relative属性时,z-index属性相对于其在文档流中的原始位置定位元素。
<html> <head> <style> .box1 { position: relative; height: 200px; width: 280px; background-color: #f0baba; z-index: 1; text-align: center; padding: 3px; margin: 10px; left: 10px; top: 10px; } .box2 { position: relative; height: 140px; width: 220px; background-color: #eae98f; z-index: 2; text-align: center; padding: 5px; margin: 10px; left: 30px; top: 30px; } .box3 { position: relative; height: 90px; width: 160px; background-color: #b7c8ae; z-index: 3; text-align: center; padding: 5px; margin: 10px; left: 50px; top: 50px; } </style> </head> <body> <p>The z-index property positions the element relative to its original position if position is relative.</p> <div class="box1"> CSS z-index: 1 </div> <div class="box2"> CSS z-index: 2 </div> <div class="box3"> CSS z-index: 3 </div> </body> </html>