[英]Z-index on position fixed in webkit nightly
在webkit每晚構建和chrome canary中，無論固定位置還是CSS文件中指定的位置，固定位置的每個元素似乎都具有超高的z-index值。
有關示例，請參見http://nick-evans.com 。
您是否認為這是這些Beta版本中的錯誤，還是我的代碼中有錯誤？
在我的示例中，我能想到的唯一原因是使用jQuery tmpl在頁面加載后呈現了較低的元素（這是對偽延遲加載的嘗試）。
.horizontal-carousel具有顯式的z-index設置為1並設置為position:fixed ，同時.col設置為z-index:9但除第一節元素以外的所有內容都具有相反的關系，因此輪播中的圖片會覆蓋其說明。
UPDATE
在我看來，未縮小的代碼會有所幫助。 這是一個鏈接
這是由您添加到.horizontal-carousel的CSS 3D變換引起的。 實際上，似乎有人遇到了類似的問題，例如“ 在webkit轉換translation3d之后css z-index丟失 ”。
不確定是您的錯還是他們的錯，我不確定。 我可以在規范中找到與此唯一相關的唯一內容是：
轉換中除“ none”以外的任何值都將導致創建堆棧上下文和包含塊。 該對象的作用就好像位置：相對對象已被指定，但也充當固定位置后代的包含塊。 變換后的元素在Z軸上的位置不會影響堆疊上下文中的順序。 當元素具有相同的z索引時，將按照z位置遞增的順序繪制對象。
要解決這個問題最簡單的方法是通過改變z的價值translate3d到-1px 。 但是，現在看來，您似乎根本沒有使用轉換。 我不知道如果您真正開始使用這些轉換做某事是否可行。
擺弄具有轉換元素的元素及其父元素的z-index可能也有幫助，但可能需要進行一些其他更改。
我計算這些固定在頁面上的位置的元素：
.head（1個標頭元素）在第273行設置為z-index 9999
.static-title（4個h1元素）在第388行設置為z-index 99
.no-touch .horizontal-carousel（4個div元素）在第489行設置為z-index 1
所有這些元素均報告了最新版Webkit每晚（版本5.0.5（6533.21.1，r91865））在樣式表中為其分配的z-index
墨卡托似乎做對了，盡管我經歷了一些不同。 我的頁面元素都具有3d變換，並且在發布評論之前彈出我的Disqus對話框以登錄時……鼠標沒有與該層進行交互（即使它是在3d變換的層之上渲染的）。 有趣的是，具有固定位置的對話框不是具有3d變換的容器的后代。
我有這個標記：
<body>
<div class="book">
<div class="page">
<div class="front-side">stuff</div>
<div class="back-side">other stuff</div>
</div>
</div>
<div id="disqus-dialog">dialog stuff</div>
帶有.book容器的透視圖和.page，.front-side，.back-side元素上的3d變換。 （我正在使用dice.js從json加載CSS）
'.front-side' : {transitionAll:'400ms', padding_bottom:'150px', position:'absolute', width:'100%', _webkit_backface_visibility: 'hidden', _webkit_transform: 'translate3D(0,0,1px) rotateY(360deg)'},
'.back-side' : {transitionAll:'400ms', padding_bottom:'150px', opacity:'0', position:'absolute', _webkit_transform: 'translate3D(0,0,-1px) rotateY(180deg)', width:'100%', _webkit_backface_visibility: 'hidden'},
但是請注意，我有translate3D（0,0,1px）和translate3D（0,0，-1px），但是我無法與固定位置對話框進行交互。
我將translation3D樣式更改為：
'translate3D（0,0，-1px）rotateY（360deg）''translate3D（0,0，-2px）rotateY（180deg）'
...還有瞧！ 我的對話框現在正在響應鼠標事件，但現在當然不能與3d轉換后的元素進行交互了。
業務很奇怪，但是值得為此做出努力。 3d變換岩襪...我的工作站點可以在此處使用disqus插件-> highdensitygames.com
具有絕對位置和較低z-index的div顯示在較高z-index（固定位置）的頂部
[英]Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position)
復雜的Webkit Bug？ 相對位置+ Z-Index +溢出隱藏+ CSS3變換
[英]Complex Webkit Bug? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform
網頁上的按鈕“移到”元素的后面，而不考慮Z-index，位置被定義為固定
[英]Button on webpage going 'behind' elements regardless of Z-index, position is defined as fixed
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.