CSS位置随窗口变动

当我们在进行页面设计时，有时候需要实现一个元素在不同尺寸的屏幕上位置不变。这时就需要用到CSS中的“fixed”定位。下面是一个例子：

.my-element{
position: fixed;
top: 10px;
right: 10px;
}

在上面的代码中，我们设置了元素的定位方式为fixed，然后将其放置在屏幕的右上角。这样无论用户如何滚动屏幕，元素的位置都不会改变。

另外一个常用的技巧是将元素放置在屏幕中央。这时可以将元素的左上角与屏幕的左上角对齐，然后使用transform属性将元素向下移动一半的高度，向右移动一半的宽度。具体的代码如下：

.my-element{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上面的代码中，我们将元素的定位方式设为fixed，然后将其左上角对齐屏幕的左上角，并通过transform属性向下移动一半的高度，向右移动一半的宽度。这样就可以实现元素的居中显示。

总之，通过使用CSS中的定位方式和transform属性，我们可以轻松地控制元素的位置和大小，在不同尺寸的屏幕上实现最佳的用户体验。