CSS 的定位属性来设置元素的位置。其中包括三种属性:相对定位(position: relative)、绝对定位(position: absolute)和固定定位(position: fixed)。
相对定位是指元素在文档流中的位置不会改变,但其相对于原先位置的偏移量可以通过 top、right、bottom 和 left 属性进行调整。例如:
.box {
position: relative;
top: 10px;
left: 20px;
}
绝对定位是指元素将脱离文档流,并且相对于距离它最近的已定位祖先元素(如果没有则相对于根元素)来进行定位。使用 top、right、bottom 和 left 属性来确定位置。例如:
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这个例子将让元素在父元素中垂直居中水平居中。
固定定位是指元素相对于浏览器窗口进行定位,并保持在同样的位置,即使页面滚动。和绝对定位一样,使用 top、right、bottom 和 left 属性来确定位置。例如:
.box {
position: fixed;
top: 10px;
right: 10px;
}
这个例子将会让元素固定在浏览器的右上角。
除了以上三种定位方式,CSS 还有静态定位(position: static)这一默认值。
需要注意的是,当使用定位属性时,应该在 CSS 中指明宽度和高度等属性,否则可能会出现元素重叠或溢出的情况。