CSS 相对定位

Question

首先，请检查这个fiddle . gif 图像和文本的位置正是我现在需要的位置。但是当我拖动 Pane 并调整它的大小时，gif 图像的位置会发生变化。即使您调整窗口大小时，我也希望 gif 图像保持在居中的“正在加载”文本之上。我怎样才能做到这一点？我尝试使用 position: relative 但我的 CSS 知识几乎处于底部。有人可以帮我解决这个问题吗？

非常感谢。

旁注:上面提供的 fiddle 最初来自这个 question .感谢Robert Koritnik求答案。

Answer 1

移动<img>怎么样？在<div>里面并使用负定位将其移动到 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还有。