CSS относительное позиционирование - PullRequest
Новая
       3

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

2 голосов
/ 30 декабря 2011

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

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

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

Ответы [ 2 ]

2 голосов
/ 30 декабря 2011

Как насчет перемещения <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);

И как ваша обновленная скрипка также.

1 голос
/ 30 декабря 2011

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

...