如何改变一个类的位置

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位置在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