Question

假设我在右上角有一个固定的位置标题（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()规则会在转换后的子项周围创建一个巨大的框以使其适合所有内部，例如，渲染超链接无法点击。

Answer 1

我无法重现您描述的行为。当我将代码粘贴到JSbin中（并为视觉辅助工具see demo 1添加了一些文本和背景）时，整个h1的标题显示在Chrome（27和30 beta）和Firefox（和22）。对z-index: -1 header（see demo 2）transform，它们都低于内容（但高于正文背景）。这是the CSS 2.1 spec的预期行为：

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

根元素形成根堆叠上下文。其他堆叠   上下文由任何定位元素生成...具有除'之外的'z-index'的计算值   '汽车'。 ...在未来的CSS级别中，可能会引入其他属性   堆叠上下文（{{1}}属性does this - Ilya）。

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：


形成堆叠的元素的背景和边界   上下文。

具有负堆栈级别的子堆叠上下文（大多数   否定第一）。

流入的，非内联级别，未定位的后代。

未定位的花车。

流入的，内联级别，未定位的后代，包括   内联表和内联块。

堆叠级别为0且定位的子堆叠上下文   堆栈级别为0的后代。

具有正堆栈级别的子堆叠上下文（最少   积极的第一）。

所以我能看到的唯一解决方案是从兄弟元素（或元素和伪元素）中创建'sandvich'，而不是从父元素及其子元素（see demo 3）创建。“

CSS无关元素夹在其他元素之间

1 个答案: