CSS中可以使用position
属性来设置元素的定位方式,常见的取值有:
static
:静态定位,元素在文档流中的位置不受影响,是默认值。relative
:相对定位,元素的位置相对于它在文档流中的位置进行偏移,不会影响其他元素的位置。absolute
:绝对定位,元素的位置相对于它的最近的非static
定位祖先元素进行偏移,如果没有则相对于body
元素。绝对定位的元素会从文档流中脱离出来,不占据原来的空间。fixed
:固定定位,元素的位置相对于浏览器窗口进行偏移,不受滚动条影响。固定定位的元素也会从文档流中脱离出来,不占据原来的空间。另外,可以使用top
、right
、bottom
、left
属性来指定元素相对于定位参照物的偏移量。
示例代码:
/* 相对定位 */
.position-relative {
position: relative;
top: 10px;
left: 20px;
}
/* 绝对定位 */
.position-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 固定定位 */
.position-fixed {
position: fixed;
top: 10px;
right: 10px;
}
其中,transform
属性用于将元素在水平和垂直方向上分别向左上方移动自身宽度和高度的一半,以实现居中的效果。