首先,请检查此fiddle。 gif图像和文本的位置恰好是我现在所需的位置。但是,当我拖动窗格并调整其大小时,gif图像的位置会改变。我希望gif图像即使在调整窗口大小时也要保持在“加载”文本居中的顶部。我怎样才能做到这一点?我尝试使用position: relative,但是我的CSS知识几乎是最底层的。有人可以帮我这个忙吗?

非常感谢。

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

最佳答案

如何在<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也。

关于css - CSS相对定位,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8683373/

10-14 14:38
查看更多