Как исправить положение Div двигаться, когда другие изменения высоты динамически

Question

У меня есть «прыгающий погрузчик» ДИВ, в котором двигается вверх и вниз по бесконечной петле (см это jsfiddle

Однако, если поместить кнопку под ним (или что-нибудь еще в этом отношении), она также будет перемещаться во времени с эффектом анимации.

есть ли вообще остановить эту кнопку от перемещения?

Я попытался добавить margins/padding на обоих , но они не работали, поэтому я удалил их.

загрузчик HTML:

<div class="loader" style="float:initial;"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 
<br /> 

<div> 
    <button id="popupArea">Click here to invoke a popup window</button> 
</div> 

с CSS существа:

.loader { 
    text-align: center;  
} 
.loader span { 
    display: inline-block; 
    vertical-align: middle; 
    width: 10px; 
    height: 10px; 
    margin: 50px auto; 
    background: black; 
    border-radius: 50px; 
    -webkit-animation: loader 0.9s infinite alternate; 
    -moz-animation: loader 0.9s infinite alternate; 
} 
.loader span:nth-of-type(2) { 
    -webkit-animation-delay: 0.3s; 
    -moz-animation-delay: 0.3s; 
} 
.loader span:nth-of-type(3) { 
    -webkit-animation-delay: 0.6s; 
    -moz-animation-delay: 0.6s; 
} 
@-webkit-keyframes loader { 
    0% { 
    width: 10px; 
    height: 10px; 
    opacity: 0.9; 
    -webkit-transform: translateY(0); 
    } 
    100% { 
    width: 24px; 
    height: 24px; 
    opacity: 0.1; 
    -webkit-transform: translateY(-21px); 
    } 
} 
@-moz-keyframes loader { 
    0% { 
    width: 10px; 
    height: 10px; 
    opacity: 0.9; 
    -moz-transform: translateY(0); 
    } 
    100% { 
    width: 24px; 
    height: 24px; 
    opacity: 0.1; 
    -moz-transform: translateY(-21px); 
    } 
} 

Как всегда, любая помощь/советы приветствуются.

Пожалуйста, обратите внимание, что я не знаю, JQuery, поэтому хотелось бы, чтобы избежать как можно больше (и, следовательно, я использую жерех MVC)

Answer 1

попробовать, как этот

.loader { 
 
    text-align: center; 
 
} 
 
.loader span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 50px auto; 
 
    background: black; 
 
    border-radius: 50px; 
 
    -webkit-animation: loader 0.9s infinite alternate; 
 
    -moz-animation: loader 0.9s infinite alternate; 
 
} 
 
.loader span:nth-of-type(2) { 
 
    -webkit-animation-delay: 0.3s; 
 
    -moz-animation-delay: 0.3s; 
 
} 
 
.loader span:nth-of-type(3) { 
 
    -webkit-animation-delay: 0.6s; 
 
    -moz-animation-delay: 0.6s; 
 
} 
 
@-webkit-keyframes loader { 
 
    0% { 
 
    width: 10px; 
 
    height: 10px; 
 
    opacity: 0.9; 
 
    -webkit-transform: translateY(0); 
 
    } 
 
    100% { 
 
    width: 24px; 
 
    height: 24px; 
 
    opacity: 0.1; 
 
    -webkit-transform: translateY(-21px); 
 
    } 
 
} 
 
@-moz-keyframes loader { 
 
    0% { 
 
    width: 10px; 
 
    height: 10px; 
 
    opacity: 0.9; 
 
    -moz-transform: translateY(0); 
 
    } 
 
    100% { 
 
    width: 24px; 
 
    height: 24px; 
 
    opacity: 0.1; 
 
    -moz-transform: translateY(-21px); 
 
    } 
 
}

<div class="loader" style="height:100px;"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 
<br /> 
 
<div> 
 
    <button id="popupArea">Click here to invoke a popup window</button> 
 
</div>

Answer 2

Просто добавьте следующий атрибут CSS:

#popupArea { 
    position:fixed; 
    top:100px;//you can change the value as you wish 
} 

Пример here.

Answer 3

Try поставить высоту в DIV заряжающего.

.loader { 
    text-align: center;  
    height:85px; 
} 

http://jsfiddle.net/csdtesting/9emc9so9/4/

Answer 4

Простой, просто установить высоту для пролета

Set высота: 100px; в загрузчике

.loader { 
    text-align: center; 
    height:100px; 
} 

Вот DEMO