CSS絕對位置偶爾不尊重

CSS：CSS絕對位置偶爾不尊重

.layers { 
    position: relative; 
    height: 500px; 
    width: 500px; 
    /* Some -webkit and -moz transformations */ 
} 
.layers > div { 
    position: absolute; 
    height: 500px; 
    width: 500px; 
} 
.item { 
    position: absolute; 
    width: 5px; 
    height: 5px; 
}

HTML：

<article class="someclass"> 
    <section class="layers"> 
     <div style="/* -webkit and -moz transformations */"> 
      <img src='image.png'> 
      <div class="item" style="/* -webkit and -moz transformations */">test</div> 
     </div> 
    </section> 
</article>

當加載該頁面時，我得到image.png與test在它的頂部90% of the time。

（確切位置取決於轉換）的時候，我嘗試加載頁面的其他10％的item DIV加載爲導致如果位置是靜態豈不是在上面的圖像。

我最好的猜測是它與首先被加載的東西有關，所以可能沒有確切的答案，但也許還有別的東西我忘了在這裏。

注意：我在Chrome和Safari上試過這兩個結果。

來源

2014-02-22 Laurent

小提琴會幫助調試。你申請什麼樣的轉變？ –

我已經把一個[在這裏開始]（http://jsfiddle.net/rY2DF/）;沒有變換我不明白爲什麼「測試」將永遠在圖像的頂部（即覆蓋） - 位置是絕對的，但沒有給出頂部/底部/左/右，所以位置[默認爲靜態值]（http://stackoverflow.com/questions/10243991/position-absolute-without-setting-top-left-bottom-right），對不對？但是沒有足夠的代碼來重現問題，我們只能猜測。 –

我也做了一個小提琴，同樣的結果：http://jsfiddle.net/WTnen/一切都會按預期加載，但啓用jQuery（2.x）onLoad時，標籤不會在圖像上方點擊運行幾次'... – Laurent

不一致的行爲是由於兩件事：一，您沒有設置.item s的實際位置（例如上/左），以及二，您的圖像沒有指定尺寸，所以其尺寸不會被瀏覽器知道直到它被加載。

因爲您沒有指定位置，但有指定的絕對位置，.item元素是defaulting to the values they would have if they were statically positioned。也就是說，他們會直接下方的圖片。

我相信，當你看到下面的圖像的.item S，這是因爲圖像是在你的緩存，因此瀏覽器知道這是它的初始佈局來看有多大，並設置.item的靜態位置在圖像下面。

當你在圖像上看到.item S，這是因爲瀏覽器還沒有制定出的圖像有多大是其初始佈局運行（即它仍然加載），所以它定位在.item就好像圖像的高度爲零一樣。通常情況下，一旦圖像加載後，佈局將被重新計算，並且.item會向下移動，但由於您已將其位置指定爲absolute，我相信瀏覽器假定它不需要重新定位它們，因爲圖像的大小不應該影響它們的位置，因爲它們已經被排除在正常的佈局流程之外。

無論如何。爲絕對定位的元素指定實際位置，並且所有內容都應開始工作。

來源

2014-02-22 16:51:20

CSS絕對位置偶爾不尊重

回答

相關問題