其他元素之间的CSS无关元素夹层

假设我在右上角有一个固定位置标题（position: fixed），并带有倾斜的<h1>元素（tranform: rotate(33.3deg)）。我如何能够在<h1>元素下滚动主内容，而不是父元素<header>？其他元素之间的CSS无关元素夹层

我试过使用直接的z-index规则，它在Firefox中工作，但不是铬。

因此，在短期：

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()规则会在转换后的孩子周围创建一个巨大的框，以将其全部放在里面，例如，超链接不可点击。

来源

2013-07-09 Rúnar Berg

“transform：rotate（）'规则将在转换后的子节点周围创建一个巨大的框。” - 这不完全是真的，但我需要手动调整我的父盒子的其他原因，但我仍然需要解决我的'Z - 索引'问题。 –

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

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

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

在每个堆叠上下文中，下面的层被涂在背面到前序：

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

孩子堆叠负面堆栈级别的情况下（大多数负面的优先）。

流入式，非内联式，非定位后代。

非定位花车。

包含内嵌表和内联块的流入内联级别非定位后代。

子堆叠上下文与堆电平0和定位后代与堆电平0。

子堆叠具有正堆水平上下文（至少正的第一）。

所以我能看到的唯一的解决办法是让从同级元素（或元素和伪元素），而不是从位置母公司和其子（see demo 3）的“三明治”。

来源

2013-07-09 18:11:08

元素和伪元素解决方案工作。 –

其他元素之间的CSS无关元素夹层

回答

相关问题