深入CSS属性(九)：z-index_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

深入CSS属性(九)：z-index_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

如果你不是一名csser新手，想必你对z-index的用法应该有个大致的了解了吧，z-index可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序，本文不去讲述基本的API如何使用，而是去更深入的了解z-index是如何工作的，使用z-index的时候有哪些问题，以及z-index在日常开发中的使用。下面我们通过一个例子来引入今天的正文，代码示例：

<style type="text/css">	.red, .green, .blue {		position: absolute;		width: 100px;		height: 100px;		text-align: center;		line-height: 100px;		color: #fff;	}	.red {		background-color: red;		z-index: 1;	}	.green {		background-color: green;		top: 70px;		left: 70px;	}	.blue {		background-color: blue;		top: 140px;		left: 140px;	}</style>  <div>	<span class="red">Red box</span></div><div>	<span class="green">Green box</span></div><div>	<span class="blue">Blue box</span></div>

如下图：

上述代码通俗易懂，下面有个问题请大家思考：在遵循下述规则的情况下，如何使用红色span元素在green和blue元素后面？

1) 不能以任何方式更改html标记；

2) 不能增加或改变任何元素的z-index属性；

3) 不恩增加或改变任何元素的position属性；

请大家思考，这个问题改如何解决？说明其原因？ ----------------------------------- 分割线 ----------------------------------------------

一、z-index 黄金法则及stack context

1) 一个box和它的父亲有相同的堆叠级别（stack level）,除非该box被通过z-index属性赋予了不同的stack level;

2) z-index属性只适应于position属性为relative、absolute、fixed的元素对象；

3) 给一个被定位（positioned）元素设置小于1的opacity属性值，意味着创建了一个堆叠上下文（stack context）,就像给该元素增加了一个z-index值；

4) 对于一个被positioned box，如果指定了z-index属性，意味着：

->该box的stack level 在当前的stack context中；

->该box建立了个本地stack context;

5) 如果box没有指定z-index，元素将被按下面的顺序堆叠（stacked）（从后到前）：

-> 正常流中的boxes，根据在源代码中的序列；

-> 浮动boxes;

-> computed后display属性值为inline/inline-block/inline-table的boxes；

-> positioned boxes 和boxes 设置opacity值小于1，根据在源代码中的序列；

因此，当我们给一个positioned元素设置了z-index时，我们做了两件事：

1) 该元素与在它前面或者后面的元素共享着相同的stack context，这也就是我们改变z-index的值，元素会移动其他元素前后者后的原因。

2) 为该元素内的任何元素创建了一个新的stack context，一旦你创建了一个stack context，内部的任何有（stack context）的任何层都会停留在这个stack context。通过上述的黄金法则，也许你已经知道上面那个问题的答案了。在黄金法则里，我们提到了个新名词“stack context”，下面我们通过一个实例来介绍它：

<!DOCTYPE html><html><html lang="en"><head>	<meta charset="utf-8">	<title>z-index example</title></head><body><h1 id="Header">Header</h1> 	<p>I am paragraph. <em> I am em</em></p>			</body></html>

一个很特殊的情况是，在一个document中，没有任何定位，document有且只有一个堆叠环境 - 通过HTML创建。下面我们给上例添加如下样式：

		h1, p {			position: relative;		} 		h1 {			z-index: 2;		}		p {			z-index: 1;		}

在这种情况下，h1,p都创建了一个stack context,这两个stack context都在document的stack context内。增加样式后h1在p元素之上。如果我们给em元素增加如下样式结果又会怎样：

		h1, p, em {			position: relative;		} 		h1 {			z-index: 2;			background-color: #f0f;		}		p {			z-index: 1;			background-color: #00f;			line-height: 40px;		}		em {			z-index: 1;			background-color: #f00;		}

增加此样式后em创建了stack context，由于em的z-index属性，它的内部的text比p标签中的其它text更接近用户。因为它是在p的stack context内部，它是一直比h1中的text低的。注意：如果你增加z-index的值，是不能使用em位于h1之上的。如果你想一个context的元素位于另一个context中的元素之上，你必须提升整个context或者设置它们为相同的context。下面是两种解决方案：方案一：

		h1, p, em {			position: relative;		} 		h1 {			z-index: 2;			background-color: #f0f;		}		p {			/* raise the entire context，p and em 都在h1 之上了*/			z-index: 3;			background-color: #00f;			line-height: 40px;			margin-top: -40px;		}		em {			z-index: 1;			background-color: #f00;		}

方案二：

		h1, p, em {			position: relative;		} 		h1 {			z-index: 2;			background-color: #f0f;		}		p {			background-color: #00f;			line-height: 40px;			margin-top: -40px;		}		em {			/*  put them into the same context */			z-index: 2;			background-color: #f00;		}

二、创建stack context及注意事项

那么创建stack context的方式有哪些？

1) When an element is the root element of a document (theelement)

2) When an element has a position value other than static and a z-index value other than auto

3) When an element has an opacity value less than 1

Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

In WebKit, styling a box with position:fixed or -webkit-overflow-scrolling:touch implicitly creates a stacking context, just like adding a z-index value.

Also, be aware of these CSS3 “triggers”:

transform != none

transform-style: preserve-3d

filter != none clip-path, mask

Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context… A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context. One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1. Now, dragging [A] under [B] hides [a] - in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.

三、z-index在某些浏览器中的问题

1) IE6中的 select元素是一个窗口控件，所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是z-index。可以在div元素上添加一个iframe设置为position:absolute，并设置div的z-index比iframe的高。

2) 因父容器（元素）被定位的缘故，IE6/7会错误的对其stacking context进行重置。

3) 在Firefox2版本中，一个负的z-index值会使元素位于stacking context的后面，而不是位于公认的背景和边框这样的元素stacking context之前。本文到此结束，最后附上本文开始时提出的问题的答案：

/* add this */div:first-child {opacity: .99;}

感谢您的阅读，文中不妥之处，还望批评指正。

四、参考链接：

Find out how elements stack and start using low z-index values

The Z-Index CSS Property: A Comprehensive Look

Elaborate description of Stacking Contexts

Overlapping And ZIndex

CSS/Properties/z-index

Understanding CSS z-index(MDN)

What No One Told You About Z-Index

测试Demo:

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles