Как изменить положение класса

Question

Итак, у меня есть div, и я хочу изменить его положение по классу, это мой код.

<h1 class="test">Hi!</h1> 

<script> 
x = document.getElementsByClassName('test') 

x[0].style.top = 500; 

</script> 

Однако положение остается тем же, почему это так?

Answer 1

Прежде всего, элемент по умолчанию position является static и это означает, что любые манипуляции с top, right, bottom, leftCSS свойства не будет явно применяться.

Итак, если вы хотите изменить top свойства, также необходимо изменить элемент position с любым из следующих значений:

relative absolute fixed

Вы можете узнать больше о CSS Позиции in Developer Mozilla

Для того, чтобы ваш случай работал, следующим образом:

<h1 class="test">Hi!</h1> 

<script> 
    x = document.getElementsByClassName('test') 

    x[0].style.position = 'relative'; // Changed the position property to relative. 
    x[0].style.top = '500px'; // Must be wrapped in quotes, and append the measurement unit in the value in this case the 'px'. 

</script> 

Вы также можете узнать больше о CSS Единицы измерения в here