CSS相对定位

Question

首先，请检查这个fiddle。gif图像和文本的位置正好是我现在需要它们的位置。但当我拖动窗格并重新调整其大小时，gif图像的位置发生了变化。我希望gif图像留在‘加载’文本的顶部居中，即使你调整窗口大小。我该怎么做呢？我试着使用position: relative，但我的CSS知识几乎是最底层的。有人能在这方面帮我个忙吗？

非常感谢。

旁注:上面提供的小提琴最初来自这个question。感谢Robert Koritnik的回答。

Answer 1

如何在<div>中移动<img>并使用负定位将其移动到Loading...文本之上？

HTML

This is some content
<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>

<button>click</button>

CSS

div#blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    z-index: 1000;
    overflow: auto;
}

div#blocker div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5em;
    height: 2em;
    margin: -1em 0 0 -2.5em;
    color: #fff;
    font-weight: bold;
}

div#blocker img {
    position: relative;
    top: -55px;
    left: 15%;
}

JavaScript

setTimeout(function() {
    document.getElementById("blocker").style.display = 'none';
}, 3000);

同时也是你的updated fiddle。

Answer 2

问题是你的一个元素是相对定位的，而另一个是绝对的。一个是相对于它的父容器，另一个是相对于页面。因此，当调整页面大小时，控制其缩放的边界框与不同的指标成比例。