索引和非聚集索引的顺序_堆叠顺序和Z索引

最新推荐文章于 2023-07-14 13:56:44 发布

cungui5726

最新推荐文章于 2023-07-14 13:56:44 发布

阅读量162

点赞数

文章标签：定位 html css js html5 ViewUI

原文链接：https://thenewcode.com/136/Stacking-order-and-z-index

版权

索引和非聚集索引的顺序

When elements are positioned absolutely on an HTML page they can overlap, not only with ordinary content, but also with other absolutely positioned elements. When that happens, how does the browser determine which elements go on top?

当元素绝对放置在HTML页面上时，它们不仅可以与普通内容重叠，而且可以与其他绝对放置的元素重叠。发生这种情况时，浏览器如何确定哪些元素排在最前面？

By default, the browser determines stacking of absolutely positioned elements by the order they appear in the code. The best analogy to help visualize this is dealing out a deck of cards. If the dealt cards do not overlap – like the face-up community cards in Texas Hold'em – then they are simply on top of the “playing surface”: all the normal body content having static, relative, and fixed positioning. If they overlap with other “cards” dealt earlier (i.e. absolutely-positioned elements earlier in the code), stacking will occur in the order they are dealt. In our earlier example, the images appeared in a certain order in the code, and so when they overlapped Aeschylus was on the bottom of the stack, Plato on top of that, and Alcibiades at the very top. The easiest way to “layer” elements with position: absolute is to change their order in the code. For example, altering our code to:

默认情况下，浏览器根据在代码中出现的顺序确定绝对定位的元素的堆叠。最好的类比来可视化这是分发一副纸牌。如果发牌不重叠(例如德州扑克中朝上的社区牌)，则它们仅位于“游戏表面”的顶部：所有正常身体内容具有static ， relative和fixed位置。如果它们与较早发出的其他“卡”(即代码中较早放置的绝对定位的元素)重叠，则堆叠将按照其发出的顺序进行。在我们之前的示例中，图像按代码中的特定顺序出现，因此当它们重叠时，Aeschylus位于堆栈的底部，柏拉图位于顶部，而Alcibiades位于顶部。最简单的将元素放置在position: absolute是更改代码中的顺序。例如，将我们的代码更改为：

<div id="greek-figures">
	<img src="plato-bust.jpg" alt="Plato" id="plato">
	<img src="aeschylus-bust.jpg" alt="Aeschylus" id="aeschylus">
	<img src="alcibiades-bust.jpg" alt="Alcibiades" id="alcibiades">
</div>

Results in the screenshot you see to the right. The Plato image in the middle is now beneath the other images, as it comes first in the code. Each image remains in the same position, but has been “dealt” in a different order.

结果显示在右侧的屏幕截图中。中间的Plato图像现在位于其他图像之下，因为它首先出现在代码中。每个图像保持在相同的位置，但是以不同的顺序“降级”。

For various reasons, sometimes we can’t change the order of elements in the code (or don’t wish to) but we do want to stack elements in a different way than that determined by the order that they occur in the code. Returning to our original code:

由于种种原因，有时我们无法(或不希望)更改代码中元素的顺序，但我们确实希望以与元素在代码中出现的顺序不同的方式来堆叠元素。返回我们的原始代码：

<div id="greek-figures">
	<img src="aeschylus-bust.jpg" alt="Aeschylus" id="aeschylus">
	<img src="plato-bust.jpg" alt="Plato" id="plato">
	<img src="alcibiades-bust.jpg" alt="Alcibiades" id="alcibiades">
</div>

If we want to re-order the stack but don’t wish to alter the order of elements in the code, we can add z-index values to the CSS controlling the images:

如果我们想对堆栈重新排序，但又不想改变代码中元素的顺序，则可以向控制图像CSS中添加z-index值：

body p {
	text-align: justify;
} 
div#greek-figures {
	float: right;
	width: 250px;
	height: 450px;
	margin-left: 2em;
}
div#greek-figures img { 
	height: 150px;
	width: 150px;
	position: absolute;
}
img#aeschylus { 
	z-index: 2;
}
img#plato {
	top: 155px;
	right: 15px;
	z-index: 1;
}
img#alcibiades {
	top: 290px;
	z-index: 2;
}

This would provide the same result as our first example, but without requiring any alteration to the order of HTML code.

这将提供与我们的第一个示例相同的结果，但无需更改HTML代码的顺序。

The body is considered to be a z-index level of 0, and any positive z-indexed element will be above the <body> (think of moving individual cards within a stacked deck). z-index elements with a negative values will be below this: note that if the body has a background-color those elements will be hidden behind the body

该body被视为z-index级别0 ，并且任何正的z索引元素都将在<body>之上(考虑在堆叠的牌组中移动单个卡)。具有负值的z-index元素将低于此值：请注意，如果body具有background-color这些元素将隐藏在body后面

z-index到底能达到多高？ (Just How High Can z-index Go?)

The maximum value of z-index is 2147483647, at least in modern browsers. You’ll never have two billion stacked elements on a page, so don’t even try to approach this number when coding your CSS.

至少在现代浏览器中， z-index的最大值为2147483647 。您在页面上永远不会有20亿个堆叠元素，因此甚至在编码CSS时也不要尝试使用这个数字。