CSS自动定位是Web开发中非常重要的一部分。在设计网站时，经常需要在网站中自动定位元素，使之能够在不同窗口大小的情况下正确显示。自动定位可以帮助我们在不同设备和屏幕上提供更加一致的用户体验。下面我们将为大家介绍CSS自动定位的基本操作。

首先，我们需要使用CSS中的position属性。position属性有四种不同的类型：static、relative、absolute和fixed。其中，static是默认的类型，而其他三种类型可以让元素以不同的方式进行定位。

position: static; /* 默认类型 */
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */
position: fixed; /* 固定定位 */

当我们需要相对于元素所在的位置进行定位时，可以使用relative类型。下面是一个例子：

.container {
position: relative;
}
.box {
position: absolute;
top: 30px;
left: 50px;
background-color: #f00;
}

在这个例子中，.container元素使用了relative类型进行定位。这意味着任何使用absolute定位的元素都会相对于.container元素进行定位。.box元素是一个使用absolute类型进行定位的元素。我们设置了它的top和left属性值，使其被定位在.container元素的上方。结果，.box元素会出现在.container元素的左上角。

如果我们想要让元素出现在页面的固定位置，而不受滚动条的影响，可以使用固定定位（fixed）：

.element {
position: fixed;
top: 0;
left: 0;
background-color: #f00;
}

在这个例子中，我们设置了.element元素的位置为固定位置，也就是其位置将固定不变，不会随着滚动条的移动而变化。我们将它定位在页面的左上角，使其始终在此位置。

总的来说，CSS自动定位是Web开发中非常重要的一环。我们可以使用不同的类型设置元素的位置和大小，从而在不同的设备和窗口大小下提供更加一致的用户体验。