其他元素之間的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無關元素夾層

回答

相關問題