[分享]css元素固定定位后移动

在CSS中，我们可以使用固定定位（: fixed）来让元素固定在页面上的某个位置，不随页面滚动而移动。但是，有时候我们需要在页面上移动这个固定定位的元素，该怎么办呢？首先，我们可以使用left属性和t...

在CSS中，我们可以使用固定定位（position: fixed）来让元素固定在页面上的某个位置，不随页面滚动而移动。但是，有时候我们需要在页面上移动这个固定定位的元素，该怎么办呢？
首先，我们可以使用left属性和top属性来调整这个固定定位元素的位置。比如，下面的代码可以将一个id为fixed的元素移动到页面的右下角：

#fixed {
  position: fixed;
  right: 0;
  bottom: 0;
} 

当页面发生滚动时，这个元素仍然会固定在右下角，但是如果我们想要让它在页面中移动，可以使用JavaScript来改变它的left和top属性值。
比如，下面的代码可以让元素在页面中移动：

var fixedEl = document.getElementById('fixed');
var left = 0;
var speed = 5;

function move() {
  left += speed;
  fixedEl.style.left = left + 'px';
}
setInterval(move, 50); 

上面的代码中，我们使用JavaScript来控制元素的左侧位置。我们首先获取元素的引用，然后定义left变量来记录元素的left值。接着，我们定义了一个move函数来更新left的值，然后将这个值赋值给元素的left属性。最后，我们使用setInterval函数来每50毫秒执行一次move函数，这样元素就可以每50毫秒向右移动5个像素。
当然，我们也可以使用类似的方法来移动元素的top值。比如，下面的代码可以让元素每50毫秒向下移动5个像素：

var fixedEl = document.getElementById('fixed');
var top = 0;
var speed = 5;

function move() {
  top += speed;
  fixedEl.style.top = top + 'px';
}
setInterval(move, 50); 

总的来说，通过固定定位和JavaScript的结合，我们可以轻松地在页面上移动固定定位的元素。当然，如果需要实现更复杂的动画效果，我们可能需要使用更高级的JavaScript库，比如jQuery或者GreenSock。