CSS布局之谜

在众多 两(或三)列布局技术 中，我有时会使用以下一种:

<div class="left1">
  <div class="left2">
    left main content
  </div>
</div>
<div class="right1">
  <div class="right2">
    right sidebar
  </div>
</div>

和...一起:

.variant1 .left1 {
  float: left;
  margin-right: -200px;
  width: 100%;
}
.variant1 .left1 .left2 {
  margin-right: 200px;
}
.variant1 .right1 {
  float: right;
  width: 200px;
}

这适用于所有主要浏览器。但是由于一些非常奇怪的原因， 完全相同的技术但颠倒了不起作用 :

.variant2 .left1 {
  float: left;
  width: 200px;
}
.variant2 .right1 {
  float: right;
  margin-left: -200px;
  width: 100%;
}
.variant2 .right1 .right2 {
  margin-left: 200px;
}

在第二个变体中，侧栏中的所有 文本都无法选择 和 所有链接都无法单击 。至少对于 Firefox 和 Chrome 来说是这样。在 IE7 中，链接至少可以单击，Opera 似乎完全没问题。

有谁知道这种奇怪行为的原因？是浏览器的bug吗？

请注意:我是 而不是 正在寻找有效的两列 CSS 布局技术，我知道有很多这样的技术。而且我不一定需要这种技术才能工作。我只想了解为什么第二个变体表现得如此。

这是一个小测试页面的链接，它应该说明问题:http://selfthinker.org/stuff/css_layout_mystery.html

最佳答案

这是一个基本的分层问题。让我们解析 visual formatting 上的 CSS 规范以找出原因。



好的，让我们看看我们所处的“堆叠上下文”。为此，我们需要知道何时创建新的堆叠上下文。



好吧，我们没有任何 z-index 值 - 所以它们都是自动的。



不，也没有定位元素。看起来我们都在“根堆叠上下文”中。



这当然解释了为什么 .right1 覆盖 .left1 - 它按源顺序在它之后。 (请注意，如果您从 margin-left: 200px 中删除 .right2 ，您会更好地看到绘制(paint)问题)。

那么，既然我们知道了这个问题(并且它符合规范)——我们如何解决它？最简单的方法就是让 .left1 的 z-index 高于 .right1 。由于它们在相同的堆叠上下文中，较高的 z-index 将覆盖源顺序:
.variant2 .left1 { position: relative; z-index: 1; }
或者，如果我们继续阅读规范 - 我们会注意到:



这意味着我们实际上可以这样做:
.variant2 .left1 { position: relative; }
这将使 .left1 的“堆叠级别”为 6 - 这将覆盖 .right1 的 4 堆叠级别。