CSS属性：Z系列（七）

在这篇文章中，我们将解释什么是完全可以的，为什么它是如此的未知和讨论一些实际问题。我们也介绍一些在浏览器的差异，我们都会遇到，唯一存在的问题，在现有版本的IE和Firefox浏览器。





如果你不是一个新手CSSer，你必须要用z-index应该对它有一个大致的了解，z-index可以控制在垂直于屏幕方向定位元件（Z轴）的堆叠顺序，本文不是告诉如何使用基本的API，但如何增强作品更深的了解。利用Z指数时，存在哪些问题，在日常的发展特性。

这里我们使用一个例子来介绍今天的文本，一个代码示例：
复制代码代码如下所示：

红色，格林，蓝色{
位置：绝对；
宽度：100px；
身高：100px；
文本对齐：中心；
行高：100px；
颜色：# FFF；
}
{红
背景颜色：红色；
Z指数：1；
}
{绿
背景颜色：绿色；
上图：70px；
左：70px；
}
{。蓝
背景颜色：蓝色；
上图：140px；
左：140px；
}


红色的盒子


绿色的盒子


蓝色的盒子


如下：

上面的代码很容易理解，有个问题需要你考虑：
在遵循以下规则的情况下，如何使用绿色和蓝色元素后面的红色跨度元素
1）HTML标记不能以任何方式更改；
2）任何元素不能z-index属性添加或更改；
3）不添加或更改任何元素的位置属性；
请想一想，这个问题是如何解决的是什么原因呢
Mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; mdash; segmentation line;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; ;; line; split line; ;; split line; ;; line; ;; split line; ;; line; ;; split line; ;; line; ;; split line; ;;
一、黄金法则和堆栈上下文属性

1）一盒，其父亲有相同的叠级（堆栈级别），除非箱通过z-index赋予不同的叠级；
2）z-index属性仅适于在相对、绝对定位属性的元素对象，固定；
3）给一个位置的不透明度属性值（定位）的元素小于1，这意味着创建一个堆栈（堆栈上下文语境），就像添加z-index值的元素。
4）一个定位框，如果z-index属性指定，这意味着：
当前堆栈上下文中的框堆栈>级别；
本地框>堆栈上下文的建立；
5）如果框不指定z-index，元素将堆放在下列顺序（堆叠）（从后到前）：
-在正常的流框中，根据源代码中的顺序；
浮动>框；
计算内联行块内联表框的显示属性值；
定位框和框不透明，设置值小于1，根据序列中的源代码；

所以，当我们建立一个定位元件的特性，我们做了两件事：
1元股份）在前面或后面的元素相同的堆栈上下文，这就是为什么我们改变z-index和移动元素围绕价值。
2）为元素中的任何元素创建一个新的堆栈上下文。创建堆栈上下文后，堆栈上下文中的任何层都将留在这个堆栈上下文中。

通过以上的黄金法则，你可能已经知道问题的答案，在黄金规则，我们提到了一个新的名词context栈；在这里，我们介绍它的一个例子：
复制代码代码如下所示：





Z指数的例子


头
我是段。我是EM



一个非常特殊的情况是，在一个文档中，没有位置，文档只有一个堆栈环境，它是由HTML创建的。
这里我们添加了以下样式：
复制代码代码如下所示：
H1，{
职位：相对；
}
{ H1
Z指数：2；
}
{ p
Z指数：1；
}

在这种情况下，H1和p都创建一个堆栈上下文，而这两个堆栈上下文位于文档的堆栈上下文中：
复制代码代码如下所示：
H1，p，EM {
职位：相对；
}
{ H1
Z指数：2；
背景颜色：# f0f；
}
{ p
Z指数：1；
背景颜色：# 00f；
行高：40px；
}
{ EM
Z指数：1；
Background-color: #f00;
}

加入这种风格后，他们创造了叠加背景下，其内部的文本更接近用户比在P标签的其他文字因为他们z-index属性是因为它在P堆栈上下文，它总是低于文本在H1。

注意：如果你增加z-index值，你不能用他们的H1。如果您想对语境因素在另一个语境要素，你必须提高整个上下文或为他们相同的语境。
下面是两个解决方案：
方案1：
复制代码代码如下所示：
H1，p，EM {
职位：相对；
}
{ H1
Z指数：2；
背景颜色：# f0f；
}
{ p
提升整个P／上下文，并在。
Z指数：3；
背景颜色：# 00f；
行高：40px；
边距：- 40px；
}
{ EM
Z指数：1；
背景颜色：# F00；
}

方案二：
复制代码代码如下所示：
H1，p，EM {
职位：相对；
}
{ H1
Z指数：2；
背景颜色：# f0f；
}
{ p
背景颜色：# 00f；
行高：40px；
边距：- 40px；
}
{ EM
将它们放入同一上下文中。
Z指数：2；
背景颜色：# F00；
}


两。创建堆栈上下文并通知

那么，创建堆栈上下文的方法是什么呢
1）元素是当一个文档的根元素（元素）
2）当元素具有静态和非静态的位置值时
3）当元素的透明度值小于1时

更新：除了不透明性，一些新的CSS属性还创建堆叠上下文。这些包括：转换、过滤器、CSS区域、分页媒体以及其他可能的媒体。作为一般规则，看来，如果一个CSS属性需要在屏幕背景的渲染，它必须创建一个新的层叠上下文。

在WebKit，造型一箱位置：固定或Webkit溢出滚动：触摸隐式创建，含蓄，和对与错。

同时，要知道这些CSS3 triggers
变换！=没有
风格：preserve-3d变换
滤波器！=没有
剪辑路径，遮罩
最后，即使一个相对定位的元素没有属性集。

常见的IE错误，通常出现在下拉菜单中，即菜单
你可以通过设置{和}来定位这个错误。
现在，拖动{ }，在{ }之下，隐藏在Internet Explorer和Internet中，它也是一种。
三、在某些浏览器z-index的问题

1）在IE6
选择的元素是一个控制窗口，所以它总是出现在顶部的堆叠顺序没有考虑自然堆积序列，位置属性或z-index.you可以添加一个iframe设置位置：绝对的div元素和套DIV高于iframe z-index。

2）因为父容器（元）定位，IE6 / 7是错误地重置它的层叠上下文。

3）在Firefox2版本，负z-index值原因是位于后面的层叠上下文，而不是在公认的背景和边框等元素的层叠上下文。

在本文的结尾，对本文开头部分提出的问题的答案是在本文的结尾。
复制代码代码如下所示：
添加此
Div：第一个孩子{
不透明性：99；
}

谢谢你的阅读。这篇课文有什么问题，我希望批评它。