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

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() rule 将在转换后的 child 周围创建一个巨大的框以将其全部放入其中，例如呈现不可点击的超链接。

Answer 1

我无法重现您描述的行为。当我将您的代码粘贴到 JSbin 中时(并添加了一些文本和背景以提供视觉帮助，see demo 1)，带有 h1 的标题作为一个整体显示在 Chrome(27 和 30 beta)和 Firefox(22)的内容上方.使用 z-index: -1 for header ( see demo 2 )，它们都低于内容(但高于正文背景)。这是根据 the CSS 2.1 spec 的预期行为:

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element ... having a computed value of 'z-index' other than 'auto'. ... In future levels of CSS, other properties may introduce stacking contexts (transform property does this — Ilya).

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

所以我能看到的唯一解决方案是从兄弟元素(或元素和伪元素)而不是父子位置(see demo 3)制作“三明治”。