html堆栈顺序
考虑以下代码：html堆栈顺序,html,css,stack,Html,Css,Stack,考虑以下代码： <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8" /> <style type="text/css"> h1 { font-size: 2em; font-family: Verdana; font-weight: bold
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
font-size: 2em;
font-family: Verdana;
font-weight: bold;
}
p {
border: 3px solid blue;
margin-top: -50px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h1>QUESTION</h1>
<p>The header text in the preceding h1 element is behind this
paragraph's text (as expected), but on top of this paragraph's
background and border (not expected).
</p>
</body>
</html>
HTML
h1{
字号：2em；
字体系列：Verdana；
字体大小：粗体；
}
p{
边框：3件纯蓝；
利润上限：-50px；
背景颜色：绿色；
颜色：白色；
}
问题:
前一个h1元素中的标题文本位于此元素后面
段落的文本（如预期），但位于本段落的顶部
背景和边框（不需要）。
为什么段落的背景和边框不像内容那样呈现在标题顶部？HTML元素的默认堆叠顺序是代码中后面的元素是“在”前面的元素 将此添加到CSS中：
position: relative;
z-index: 2;
因为这两个元素在同一堆叠上下文中都是流动的、未定位的块级元素 两个流动的、未定位的块并不严格地相互“上”或“下”——它们的内容和背景分别堆叠 添加
position:relativez-index:auto如果仔细阅读CSS2规范，您会发现这是正确的行为 在flow中，同一堆叠上下文中的未定位块级元素首先渲染其所有背景，然后渲染其所有内容。它们的背景位于带有负
z-索引的定位元素之上，位于其他元素之下
绘制算法中的相关步骤：
对于其所有在流中、未定位的块级子体（按树顺序）：如果元素是块、列表项或其他等效块：
元素的背景色
元素的背景图像
元素的边框
。。。对于其所有在流中、未定位的块级子体（按树顺序）：
。。。对于该元素的每个行框：
对于作为该元素子元素的每个框，在该行框中，按树顺序：
对于内联元素：
对于所有元素的流内、非定位、内联级子元素
以及该行元素内的所有文本行
框，按树的顺序：
如果这是一段文字，则：
文本
浮动和定位元素始终是“原子的”——它们的背景和内容将在一个步骤中一起呈现（步骤3、5、8或9）。但在flow中，相同堆叠上下文中的未定位块元素会渲染其所有背景（在步骤4中），然后渲染其所有内容（在步骤7中）
在这种情况下，对于流中的非定位同级元素H1和p（树中p之前的H1），第4步呈现H1背景，然后呈现p背景，然后第7步呈现H1内容，然后呈现p内容。如果即使在遵循上述输入之后，您的代码仍然无法工作，请尝试下面提到的方法来找出问题
在chrome浏览器>右键单击>检查>控制台中打开页面
在我的例子中，bootsrap样式表引用和jquery被错误地放置在控制台上，我发现了这个错误并修复了它
问候,，
Mukul BawaOP的问题是：为什么段落的背景和边框不能像内容一样呈现在标题顶部？
您所说的证实了OP的困惑。虽然position relative可能有助于将p
背景
和边框
置于页眉上方，但他不明白为什么规则规定它们应该已经存在。请参阅。它是否按预期工作？如果是，请发布更多关于您的代码以及受影响的浏览器的信息。它是哪个浏览器，哪个doctype？如果这是您的全部代码，那么浏览器可能正在进入怪癖模式并做一些古怪的事情。@zzbov：不，那不是我的全部代码，只是一个片段；我还有其他所有必要的废话要做；）@比尔，请回答我上面的评论，这样我就可以帮助你了。@Kevin，好的，我来看看。虽然那一页确实形象化了这一点，但没有显示与你的陈述相符的规则。据我所知，当暗示z-index
时，整个框始终呈现在前面的框上方。是的，这是一个很好的链接，也是一个很好的解释。我从来没有听说过在堆栈级别上内容和背景/边框之间的区别——凯文怀疑这是不是真的…@凯文，是的，你说的是我认为是真的。@Bill，我不否认那页解释的内容。那页所解释的绝对正确。但是，分层模型存在不同的上下文。这两个元素具有相同的z索引。在您的示例中，“second”元素是子元素，而不是兄弟元素。子对象将在其父对象的顶部进行渲染。父子关系为我们提供了您所说的“隐含”z指数。我们在兄弟元素之间没有这种关系。为什么你认为这是问题中的情况？