html - CSS 绝对位置偶尔不受尊重

Question

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>

加载此页面时，90% 的情况下，我会得到 image.png，上面有 test。

(确切位置取决于转换) 另外 10% 的时间我尝试加载页面，加载 item div 就好像位置是静态的，这导致它不在图像的顶部。

我最好的猜测是它与首先加载的内容有关，因此可能没有确切的答案，但也许我在这里忘记了其他事情。

注意:我在 Chrome 和 Safari 上试过，结果相同。

Answer 1

不一致的行为是由于两件事造成的:第一，您没有为 .item 设置实际位置(例如顶部/左侧)，第二，您的图像没有指定尺寸，因此浏览器在加载之前不会知道它的大小。

因为您没有指定位置，但是已经指定了绝对定位，所以 .item 元素是 defaulting to the values they would have if they were statically positioned .也就是说，它们将直接位于图像下方。

我相信当您看到图像下方的 .item 时，那是因为图像在您的缓存中，因此浏览器在其初始布局运行时知道它有多大，并且设置图像下方 .item 的静态位置。

当您在图像顶部看到 .item 时，那是因为浏览器尚未计算出图像在其初始布局中的大小运行(即它仍在加载)所以它定位 .item 就像图像的高度为零一样。通常，一旦加载图像，就会重新计算布局，.item 会向下移动，但是因为您已将它们的定位指定为 absolute，我相信浏览器假设它不需要重新定位它们，因为图像大小不应该影响它们的定位，因为它们已经脱离了正常的布局流。

无论如何。为您的绝对定位元素指定一个实际位置，一切都应该开始工作。