一、定位的基础概念
在谈及CSS中的absolute和relative定位之前,我们先来了解一下CSS中的定位的基础概念。
CSS中的定位指的是根据元素在文档流中的位置,将元素放置在指定的位置上。常见的定位有三种:static、relative、和absolute。其中static是默认的定位方式,也就是元素在文档流中的位置不会发生变化,而relative和absolute则会触发定位。
不同的定位方式触发的定位是不同的,我们将在下面的内容中详细介绍。
二、relative定位详解
相对定位(relative)指的是元素相对于其在文档流中的位置进行定位。
相对定位会触发position属性,使元素成为定位元素。相对于该元素在文档流种的位置,通过 top、right、bottom、left 属性可以控制元素向上、右、下、左移动的距离。例如:
.box {
position: relative;
top: -20px;
left: 30px;
}
这样,.box元素向上移动20像素,向左移动30像素。
相对定位对其他元素的位置不会造成影响,其他元素和 .box 之间的距离不会改变。
三、absolute定位详解
绝对定位(absolute)指的是元素相对于最近的已经定位的祖先元素进行定位。
绝对定位会触发position属性,使元素成为定位元素。通过 top、right、bottom、left 属性可以控制元素相对于其已经定位的祖先元素的上、右、下、左移动的距离。例如:
.box {
position: absolute;
top: 20px;
left: 30px;
}
这样,.box元素相对于其已经定位的祖先元素向上移动20像素,向左移动30像素。
如果没有找到已经定位的祖先元素,则相对于文档定位。
四、absolute和relative的比较
absolute和relative的定位方式既有相同点,也有不同点。下面我们将二者进行比较:
1. 相同点
相同点在于二者都可以设置top、right、bottom、left属性来改变元素的位置。
2. 不同点
不同点在于二者不同的定位方式,导致改变其他元素的位置的方式不同。relative定位的元素移动改变了周围元素的位置,而absolute定位的元素不会影响周围元素的位置
五、小结
CSS中的绝对定位(absolute)和相对定位(relative)分别相对于已经定位的祖先元素和文档定位,它们能够控制元素位置,并且存在不同的定位方式。需要注意的是,relative定位会改变其他元素的位置,而absolute定位则不会。
代码实例:
我是一个相对定位的元素
我是一个绝对定位的元素
.container {
position: relative;
}
.box {
position: relative;
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
.box2 {
position: absolute;
top: 20px;
left: 150px;
width: 100px;
height: 100px;
background-color: yellow;
}