0

假设我position: fixed在右上角有一个带有倾斜<h1>元素 ( ) 的固定位置标题 ( tranform: rotate(33.3deg))。如何让主要内容在<h1>元素下方但在父<header>元素上方滚动？

我试过使用直接z-index规则，它适用于 Firefox，但不适用于 chrome。

简而言之：

header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 0;
}
header h1 {
    transform: rotate(33.3deg);
    z-index: 9;
}

这在 Firefox 中有效，但在 Chrome 中，孩子<h1>与父母一起进入内容之下<header>

在这件事上，将标题夹在内容周围很重要，因为该transform: rotate()规则将在转换后的子项周围创建一个巨大的框以将其全部放入其中，例如使超链接无法单击。

4

1 回答 1

0

我无法重现您描述的行为。当我将您的代码粘贴到 JSbin 中（并为视觉辅助添加了一些文本和背景，请参见演示 1）时，带有 h1 的标题作为一个整体显示在 Chrome（27 和 30 beta）和 Firefox（22）的内容上方. 使用z-index: -1for header（参见演示 2），它们都位于内容下方（但位于正文背景上方）。这是根据CSS 2.1 规范的预期行为：

每个盒子属于一个堆叠上下文。给定堆叠上下文中的每个定位框都有一个整数堆叠级别，这是它在 z 轴上相对于同一堆叠上下文中其他堆叠级别的位置。具有较高堆栈级别的框总是在具有较低堆栈级别的框之前格式化。盒子可能有负的堆栈级别。在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。

根元素形成根堆叠上下文。其他堆叠上下文由任何定位元素生成......具有除“auto”之外的“z-index”计算值。...在未来的 CSS 级别中，其他属性可能会引入堆叠上下文（transform属性会这样做- Ilya）。

在每个堆叠上下文中，以下图层按从后到前的顺序绘制：

  1. 构成堆叠上下文的元素的背景和边框。
  2. 具有负堆栈级别（最负优先）的子堆栈上下文。
  3. 流入的、非内联级别的、非定位的后代。
  4. 未定位的浮动。
  5. 流入的、内联级的、非定位的后代，包括内联表和内联块。
  6. 堆栈级别 0 的子堆栈上下文和堆栈级别 0 的定位后代。
  7. 具有正堆栈级别的子堆栈上下文（最不积极的优先）。

所以我能看到的唯一解决方案是从兄弟元素（或元素和伪元素）制作“三明治”，而不是从父位置及其子元素（参见演示 3）。

于 2013-07-09T18:11:08.330 回答