Html CSS不相关元素夹在其他元素之间

假设我在右上角有一个固定位置标题（

position:fixed

），带有一个倾斜的

元素（

tranform:rotate（33.3deg）

）。如何使主要内容在

元素下滚动，而在父

元素上滚动

我尝试过使用直接的

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中，子

与父

---

在这种情况下，在内容周围夹住标题是很重要的，因为

transform:rotate（）

规则将在转换的子级周围创建一个巨大的框，以便将其全部放在里面，例如，使超链接不可读取。

我无法重现您描述的行为。当我将您的代码粘贴到JSbin（并添加了一些文本和背景以提供视觉帮助）中时，带有h1的标题作为一个整体显示在Chrome（27和30 beta版）和Firefox（22版）的内容上方。对于

标题
（），使用
z-index:-1
，它们都位于内容下方（但位于正文背景上方）。这是预期的行为，根据：

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

根元素构成根堆栈上下文。其他堆叠
上下文由任何定位元素生成。。。计算值为“z指数”的，而不是
“自动”。。。在未来的CSS级别中，可能会引入其他属性
堆叠上下文（
transform
property-Ilya）

在每个堆叠上下文中，将绘制以下层
前后顺序：

构成堆叠的元素的背景和边界
上下文
具有负堆栈级别的子堆栈上下文（大多数
首先是负数）
流内、非内联级别、非定位子体
未定位的浮动
流内、内联级别、非定位子体，包括
内联表和内联块
堆栈级别为0且已定位的子堆栈上下文
堆栈级别为0的子体
具有正堆栈级别（最少）的子堆栈上下文
首先是肯定的）
因此，我能看到的唯一解决方案是从兄弟元素（或元素和伪元素）生成“sandvich”，而不是从位置父元素及其子元素（）。
“transform:rotate（）
规则将在转换的子元素周围创建一个巨大的框。”-这不完全正确，但出于其他原因，我需要手动调整父框的大小，但我仍然需要解决我的
z-index
问题。