【css】相对定位,绝对定位和固定定位
在CSS中,有三种基本的定位方式:
- 静态定位(Static Positioning)
- 相对定位(Relative Positioning)
- 绝对定位(Absolute Positioning)
- 固定定位(Fixed Positioning)
静态定位:
静态定位是默认的定位方式。在这种方式下,元素按照正常的文档流进行布局。
div {
position: static;
}
相对定位:
相对定位是一种较为特殊的定位方式,它对元素进行相对于其正常位置的定位。
div {
position: relative;
top: 20px;
left: 40px;
}
绝对定位:
绝对定位是一种强大的定位方式,它对元素进行相对于其最近的已定位(即非 static)的祖先元素的定位。
div {
position: absolute;
top: 20px;
right: 15px;
}
固定定位:
固定定位是一种特殊的绝对定位,其要点在于元素相对于浏览器窗口是固定位置。
div {
position: fixed;
bottom: 10px;
left: 5px;
}
以上就是CSS中的四种基本定位方式。每种定位方式都有其特点,可以根据实际需求选择使用。
评论已关闭