css盒子上下移动 |css代码生成器论坛

使用position属性实现盒子上下移动：大家可以使用position属性和top、bottom、left、right等属性值来定位元素的具体位置。其中，position属性有三种值，分别是relative、absolute和fixed。在实现盒子上下移动时，通常会指定position为relative或者absolute，然后使用top或bottom属性值来调整盒子位置。

.box{
position: relative;   /*设置position值为relative*/
top: 50px;            /*盒子上移50个像素*/
}

使用transform属性实现盒子上下移动：大家可以直接使用CSS3的transform属性及其translateY函数来实现盒子上下移动。translateY函数可以设置一个值，用于表示垂直方向上的偏移量。

.box{
transform: translateY(50px);   /*盒子上移50个像素*/
}

无论是使用position属性还是使用transform属性，都可以轻松实现盒子的上下移动效果。需要注意的是，使用position属性时，盒子的位置相对于其包含元素或父元素来定位；而使用transform属性时，盒子的位置仍然是相对于其默认位置来计算的，只是在屏幕上呈现的位置发生了改变。