2016-11-23 20 views
0

Привет У меня есть followin DIV:CSS + Jquery как сделать Div поплавок над другим содержанием сНу

<div class="pleaseWait"> 
      <img src="animation.svg" /> 
     </div> 

enter image description here

У меня есть это чуть ниже моего <body> тега.

Мой стиль:

.pleaseWait{ 
    margin: 0px auto; 
    text-align: center; 
    margin-top: 200px; 
    display: none; 
} 

Теперь, с JQuery в зависимости от Ajax вызовов или все, что я хочу, чтобы отобразить эту <div> на верхней части страницы по центру.

$('.pleaseWait').show(); 

Любая подсказка о том, какой стиль css мне нужно добавить, чтобы получить этот результат. Я хочу, чтобы это было отзывчивым, поэтому, если размер браузера будет меньше, он будет двигаться вместе с ним.

Кстати, я ссылаюсь на modernizr.min.js в случае, который работает.

+0

вы можете показать картину, по крайней мере? –

+0

Чтобы использовать 'margin: 0 auto;', вам нужно указать ', pleaseWait' ширину. – BenM

+0

'позиция: фиксированная; верх: 50%; слева: 50%; margin-top: (svg height/-2) px; margin-left: (svg width/-2) px; z-index: 9999; ' – Phil

ответ

0

Почему вы не использовать Z-индекс для установки изображения перед другими элементами страницы, например так:

.pleaseWait { 
margin: 0px auto; 
text-align: center; 
margin-top: 200px; 
display: none; 
z-index:2; 
} 
+0

' 2' кажется довольно низким для того, чтобы что-то было сверху – Phil

+1

Кроме того, «z-index влияет только на элементы, которые имеют значение позиции, отличное от статического (по умолчанию)» - https: // css -tricks.com/almanac/properties/z/z-index/ – DaMaGeX

+0

Да, должно быть с положением: абсолютное. –