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屬性，我們可以輕松地控制元素的位置和大小，在不同尺寸的屏幕上實現最佳的用戶體驗。