在CSSz-index属性的深入分析，处理顺序

有许多非预期的重叠误差在HTML页面元素的项目，其中大部分是在定位Z-INDEX问题。事实上，每一次他们解决类似的问题，他们基本上都是一样的。在最后的分析中，他们还可以认识模糊。他们可以解决问题，但不理解他们的原因，导致重复的错误。所以他们决定明确重叠的问题，理顺z-index。

搜索和实践的比较之后，让我们随着元素重叠的背景知识和可能的原因入手，谈谈定位元素的z-index秩序。总结我目前的理解，我希望你也能有一点帮助或者你已经遇到了类似的问题，同样的疑惑的启发。

元素位置重叠的背景常识

（x）html文档中的元素通常在公共流（正常流）中，也就是说，它们的顺序是由文档中元素的顺序位置决定的。此时，通常没有重叠，但是指定的负边距可能重叠。当我们使用CSS指定一个浮点数或某个元素的位置时，元素的位置会发生变化：

1。指定左/右浮点值。

线内的元素也会对块元素隐身。元素将从文档的公共流中浮动，向左或向右浮动，直到外部边缘与容纳盒或另一个浮动框相遇。

2。指定相对位置值

原来的空间仍然可以保留，而不是它在普通流中的位置。

三.绝对指定位置值

线内的元素也会对块元素隐身。元素将从文档的公共流中分离出来，相对于最近的固定祖先元素迁移。如果元素没有固定的祖先元素，其位置与初始包含块偏移量相关。

4。指定固定的位置值

元素从文档的普通流中分离出来，并被固定到浏览器中的某个位置，而不是浏览器窗口。

在这四种情况下，文档中的元素可能被浮动/定位元素覆盖重叠。

元素重叠的可能原因

1。负边距/浮动浮动

当利率是负的，元素将根据参考线偏移，缘左 /边距参考线，上述元素的左/元素（如无兄弟元素的左内侧或内侧父元素），对元素本身低于参考线的右侧边界或边界的权利和利润率底。一般来说，负空间可以用来放一排，但没有一个好的元素可以重叠计算。堆叠顺序是通过元素的位置在文件中确定的，它将出现在它。

浮动元素从文档的普通流中分离出来，可以覆盖或阻止文档中的元素。

2。位置相对/绝对/固定位置

当位置值设置为相对/绝对/固定的元素，该元素发生偏移可能是重叠和z-index属性激活。z-index值可以控制堆叠顺序（顺序栈）在垂直于显示屏的方向定位元素（Z轴）。当大元素的值重叠时，它们将位于较小的元素上。

三.窗口窗口元素重叠

当浏览器解析页面，我们首先确定元素的类型：窗口元素都优于非窗口元素（即窗口元素将覆盖其他非窗口元素），和相同的窗型可以激活z-index属性来控制堆叠顺序。

Flash元素属于窗口窗口元素。

所以如果页面Flash元素和其他元素的重叠，你需要嵌入式Flash的wmode属性窗口（Windows，违约将导致上述问题）改为非窗口模式：不透明（非透明窗口）或透明（非透明窗口）。

在IE6，选择属于窗口式控制

以同样的方式，它也产生窗口元素遮挡问题。解决的办法是使用iframe（原理：IE6，普通的元素不可以叠加选择，iframe可以覆盖选择，普通元素可以覆盖iframe） / div模拟来实现选择的影响。通常我都是选择DIV闭塞（appendChild）在内部添加一个空的iframe，设置位置：绝对从文档流的空间，宽度：100%；高度：100%；div的z-index：- 1，覆盖整个父；确保值小于父div的z-index值父div覆盖在上面的iframe，iframe的掩护选择。

Z指数和定位位置使用

使用的前提下

Z指数只能在相对或绝对的或固定的位置属性值的元素是有效的。

基本原理

z-index值可以控制堆叠顺序（顺序栈）在垂直于显示屏的方向定位元素（Z轴）。当大元素的值重叠时，它们将位于较小的元素上。

使用的相对性

z-index值决定在同一个父元素的子元素的堆叠顺序。父元素的z-index值（如果有）定义的堆叠顺序的子元素（CSS层叠PDF ）。如果我们追溯查找包含z-index值父元素，它可以被视为一个自由的Z元件。它可以比较的Z值与同级别的兄弟定位元件或其他免费的位置元素的父元素，并决定它的堆叠顺序。如果同一层次的元素z-index值相同，堆叠顺序是由文档中元素的位置确定，然后它会出现在这。

所以如果你发现一个更大的Z元素是由较小的值模糊，检查它们之间的DOM节点的关系，主要是因为父节点包含定位元素，激活并设置z-index值。

因为这种相关性，这也造成了浏览器的不兼容问题。原因是IE6和7以下的位置值是非静态的元素。不添加z-index值，Z指数：0将增加含蓄，而Firefox或Chrome等浏览器将遵循标准的默认属性：汽车，不会产生价值。

另一点需要注意的是，负z-index也是基于大小比较原则。一般来说，负z-index将通过透明的身体被覆盖，导致如点击和其他事件的响应问题。请谨慎使用。

图形的分层显示

事实上，我们经常接触的Z是分层显示属性。了解背后的原理本质上理解z-index分层显示的原理。现在让我们举个例子来认识对象和参与层次显示属性（Z轴，根，层叠上下文、箱、叠级）和它们之间的关系。

HTML标记
解释uff1a

1。在构建渲染树，相应的框将生成的元素，所以div # D1 -> D1：箱、DIV # D2 -> D2：箱、DIV # D3 -> D3：箱、DIV # D4 -> D4：箱，P # P1 -> P1：箱。

2、定位框，如果z-index属性值不是0，一个新的层叠上下文将被创建，其后裔箱将属于新的层叠上下文。

三.相同的层叠上下文的Z指数具有可比性，也就是说，当讨论的特性，你必须集中在层叠上下文来解释。为例，虽然9999小于10，因为D4：箱和D1：箱位于不同层的背景下，这是不可能的判断哪个盒子是更贴近用户。

重叠的规则

堆栈规则是确定哪个盒子更接近用户。

1。前提：盒属于相同的层叠上下文，和Z是一样的

规则：根据文档树中对应于元素框的元素的顺序，后者比前者更接近用户（返回前）。
CSS代码将内容复制到剪贴板。


2。前提：盒属于相同的层叠上下文，和Z指数是不同的

规则：一个大盒子z-index属性值是更贴近用户

CSS代码将内容复制到剪贴板。
3。前提：盒子属于不同的堆叠上下文，堆叠上下文/没有孙子关系。

规则：盒子将搜索沿母盒直到母盒属于相同的层叠上下文，然后比较母盒z-index属性值。z-index值大的盒子更贴近用户。
CSS代码将内容复制到剪贴板。

D3

D2
D3

4。前提：盒子属于不同的堆叠上下文，以及堆叠上下文中的父子关系。

规则：属于子堆叠上下文的框必须更贴近用户。

CSS代码将内容复制到剪贴板。
Z指数的作用

再罗嗦一句：一个层叠上下文z-index可以相比的，也就是说在z-index的讨论必须是层叠上下文属性。

它有两个功能：1。在堆栈上下文中设置它的堆栈级别；

2。当z-index属性值不是0，一个新的层叠上下文在盒子里了，和盒子的后裔框默认为新的层叠上下文。

注：Z指数的默认值是自动的，而自动赋值为0。因此，一个新的层叠上下文不创建默认的。

Z阀效应

z-index属性值的设置框是唯一有效的，与非定位框的Z指数是0。

也许你会给下面的反例：

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

console.log（window.getcomputedstyle（document.getelementbyid（'d1 '））{ 'zindex}）； / /输出10
然而遗憾的是，以上是非定位元素div # D1 z-index属性值，没有z-index值的非定位框。

用于定位的元素，它将给Z到相应的定位框，和非定位的元素将不。