CSS —— z-index與background重疊研究

阿新 • • 發佈：2019-01-21

一、z-index

規定頁面的重疊次序，對指定position為relative、absolute的元素有效（fixed沒有細究）。

二、background

通過自己的探索發現，元素在z軸向分為三層，示意圖如下：

說明：其從上到下疊放次序依次為：content內容層——背景圖片層——背景顏色層。上層會覆蓋下層，但覆蓋區域大小取決於上層的實際大小（如文字僅僅佔據字型的區域，背景圖片僅僅覆蓋圖片大小的區域，其它區域仍然為背景色）。padding屬於背景，但margin不是。

三、z-index與background的關係

1、通過實踐發現，背景顏色層預設並不是白色，而是透明

，所以連個div重疊在一起，若z-index較大的div沒有設定背景顏色，且背景圖片沒有填滿整個背景，那麼沒有被背景圖片覆蓋的區域將被顯示為z-index較小的div的相應背景或背景顏色。所以背景顏色在重疊中起著至關重要的作用，當背景圖片沒有填滿整個背景時，還應該設定背景顏色為white。

驗證：

<!DOCTYPE html>
<html>
<head>
	<title>z-index與background重疊研究</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin:0;
			border:0;
		}
		.area{
			position: relative;
			width: 200px;
			height: 200px;
			margin:0 auto;
			border:1px dotted black;
		}
		.area > div{
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 200px;
			z-index: 10;	/*內部第一個div*/

			/*通過設定上層的div的背景顏色與否檢視效果。
			background-color: white;
			*/
		}
		.area > div + div{
			z-index: 5;		/*內部第二個div*/
			background-color: pink;
		}
	</style>
</head>
<body>	
	<div class="area">
		<div>
			高為200，寬為200的div1，絕對定位，z-index=10,未設定背景顏色
		</div>
		<div>
			<br/>
			<br/>
			<br/>
			高為200，寬為200的div2，絕對定位，z-index=5，背景顏色為粉紅pink
		</div>
	</div>
</body>
</html>

效果：

2、z-index優先在同級元素做比較，若同級元素沒有指定z-index，則預設不比較，但設定了z-index大於0的元素重疊在上層。此時同級中設定了z-index的元素可與其它未設定z-index的同級元素的子元素比較z-index，並得出兩者的重疊次序。假設同級中有兩個元素設定了z-index，則兩個同級元素比較z-index大小，此時不能跨級比較z-index（即同級中z-index小的元素，無論內部的子元素z-index有多大，都會處在父級元素中z-index較大的元素的底層）。

CSS —— z-index與background重疊研究

CSS —— z-index與background重疊研究

css z-index層重疊順序

CSS z-index的用法

CSS z-index在ie67中不起作用

CSS----z-index 屬性詳解

CSS z-index 屬性控制div上下層次

關於z-index與transform同時使用時的一些感想

CSS z-index 屬性(設定元素的堆疊順序)

css學習background-定位-z-index

CSS 中 position:absolute 與 z-index 對層次結構影響

css定位與z-index例項

CSS中透明度(opacity)與疊放層級(z-index)

position 與z-index的愛恨情仇

CSS的z-index

【CSS】獲取元素的z-index值以及各種值的意義

CSS層疊上下文、層疊等級、層疊順序、z-index

CSS的下拉選單被擋住，修改Z-INDEX也不成功

CSS層級關係--z-index

聊聊CSS中的層疊相關概念_CSS, z-index, BFC 教程

css總結(1):z-index和vertical-align

CSS —— z-index與background重疊研究

相關推薦