CSS относительное позиционирование

Прежде всего, проверьте эту скрипту. GIF-изображение и текст расположены именно так, как мне нужно прямо сейчас. Но когда я перетаскиваю панель и изменяю ее размер, положение GIF-изображения меняется. Я хочу, чтобы gif-изображение оставалось поверх текста «Загрузка» по центру, даже когда вы изменяете размер окна. Как я могу это сделать? Я пытался использовать position: relative, но мои знания CSS почти на нуле. Может ли кто-нибудь помочь мне в этом, пожалуйста?

Большое спасибо.

sidenote: представленная выше скрипка изначально взята из этого вопроса. Спасибо Роберту Коритнику за ответ.


css positioning
person Isuru    schedule 30.12.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Как насчет того, чтобы переместить <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);

Как и ваша обновленная скрипка.

person andyb    schedule 30.12.2011
comment
Одна маленькая вещь: как я могу сделать то же самое, без использования jQuery. У меня проблемы с CSS Selectors. скрипка - person Isuru; 31.12.2011
comment
У тебя почти получилось! Просто селекторы CSS задом наперед. Вам нужны div#blocker div и div#blocker img. Также обратите внимание, что они не имеют ничего общего с jQuery. В вашей скрипке вы намеренно не загрузили jQuery, но это вызывает проблему, поскольку ваш JavaScript вызывает метод jQuery .hide(). Также обратите внимание, что .hide() можно вызывать только для объекта jQuery, а document.getElementId не возвращает объект jQuery. Я обновил свой ответ полным решением без jQuery. - person andyb; 31.12.2011
comment
большое спасибо. Я даже разместил еще один вопрос, потому что думал, что вы не увидите мой последний комментарий. :) в любом случае, еще раз спасибо. - person Isuru; 31.12.2011
comment
Без проблем! Рад помочь :-) - person andyb; 31.12.2011

arrow_upward
1
arrow_downward

Проблема в том, что один из ваших элементов расположен относительно, а другой - абсолютно. Один относится к родительскому контейнеру, другой — к странице. Таким образом, когда размер страницы изменяется, ограничивающая рамка, которая управляет их масштабированием, пропорциональна различным показателям.

person Ken    schedule 30.12.2011