JavaScript Z 索引

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中 Z 索引如何工作
  2. 如何使用 JavaScript Z 索引
  3. 使用 jQuery 建立一個 Z 索引
JavaScript Z 索引

z index 屬性與 HTML 元素重疊,並返回或設定顯式定位元素的堆疊順序。

堆疊順序是指元素在 z 軸上的位置,也稱為堆疊級別。

具有較高堆疊順序的元素將位於較低堆疊順序的前面。

在 JavaScript 中 Z 索引如何工作

我們使用維度來完整地檢視每個物件/專案並確定其大小。因此,我們使用 z index 沿 z 軸呈現 HTML 元素。

例如,我們有四個大小相同但顏色不同的盒子。如果我們想同時看到所有這些,它看起來如下 2D 圖片,具有 X 和 Y 尺寸。

javascript z 索引 - 沒有 z 軸

如果我們在 Z 維度看同一張圖片會怎樣?它看起來如下 3D 影象,具有 X、Y 和 Z 尺寸。

javascript z 索引 - 帶 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";
}

輸出:

javascript 中的 z 索引

看,只要我們點選把圖片放在前面,圖片就會出現在前面。這是因為我們將其 zIndex 屬性的值從 -1 更改為 1

使用 jQuery 建立一個 Z 索引

function stackFn() {
    //css method set/returns the css property
    $("#my_image").css("z-index", "1");
} 

輸出:

使用 jQuery 的 javascript z 索引

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook