JavaScript Z 索引
z index 属性与 HTML 元素重叠，并返回或设置显式定位元素的堆栈顺序。
堆栈顺序是指元素在 z 轴上的位置，也称为堆栈级别。
具有较高堆栈顺序的元素将位于较低堆栈顺序的前面。
在 JavaScript 中 Z 索引如何工作
我们使用维度来完整地查看每个对象/项目并确定其大小。因此，我们使用 z index 沿 z 轴呈现 HTML 元素。
例如，我们有四个大小相同但颜色不同的盒子。如果我们想同时看到所有这些，它看起来如下 2D 图片，具有 X 和 Y 尺寸。
如果我们在 Z 维度看同一张图片会怎样？它看起来如下 3D 图像，具有 X、Y 和 Z 尺寸。
如何使用 JavaScript Z 索引
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Z Index</title>
</head>
<body>
<center>
<h1>Learning JavaScript Z Index</h1>
<img id="my_image" src="https://images.pexels.com/photos/10970094/pexels-
photo-10970094.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="200"
height="200">
<button onclick="stackFn()">bring the picture to the front</button>
<p>This is picture has z-index as 0.</p>
<br />
<p>Bring the picture to the front by clicking on the button.</p>
</center>
</body>
</html>
#my_image {
position: absolute;
left: 400px;
top: 120px;
z-index: -1;
}
h1,p {
color: red;
}
body {
text-align: center;
}
function stackFn() {
document.getElementById('my_image').style.zIndex = '1';
}
输出：
看，只要我们点击把图片放在前面，图片就会出现在前面。这是因为我们将其 zIndex 属性的值从 -1 更改为 1。
使用 jQuery 创建一个 Z 索引
function stackFn() {
// css method set/returns the css property
$('#my_image').css('z-index', '1');
}
输出：
相关文章
JavaScript 中的 Map 索引
发布时间：2024/03/20 浏览次数：197 分类：JavaScript
-
JavaScript map 方法很容易实现，我们将讨论它的不同参数，以及它们在不同场景中的使用方式。
JavaScript 中 let 和 var 的区别
发布时间：2024/03/20 浏览次数：79 分类：JavaScript
-
本教程描述了两个关键字 var 和 let 在 JavaScript 中的实际区别。
JavaScript 指针
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
JavaScript 没有明确的方法来定义指针。它允许在对象之间传递值和引用，但不能显示引用。本文将介绍在 JavaScript 中定义指针的好方法。
JavaScript 元组示例
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
在 JavaScript 语言中，元组是具有不可变特性的数组类型。我们可以使用单个变量访问元组，该变量是数组的一种。
使用 JavaScript 编码 HTML
发布时间：2024/03/20 浏览次数：83 分类：JavaScript
-
本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换，它替换了具有潜在危险的字符。
使用 JavaScript 加载外部 HTML 文件
发布时间：2024/03/20 浏览次数：133 分类：JavaScript
-
本文演示了如何使用 JavaScript 和 jQuery 加载外部 html 文件。
JavaScript 延迟后重定向页面
发布时间：2024/03/20 浏览次数：87 分类：JavaScript
-
本教程展示了如何使用 JavaScript 中的 setTimeout 方法在延迟后重定向页面。
