CSS中定位有三种类型:相对定位(relative)、绝对定位(absolute)以及固定定位(fixed),它们在网页设计中的作用都非常重要。
相对定位是针对元素的原始位置进行定位,通过设置元素的left、right、top、bottom属性来改变元素原始位置的偏移量。例如:
p {
position: relative;
left: 20px;
top: 10px;
}
这段代码将会将p元素的位置往右偏移20像素,往下偏移10像素。
相对定位不会脱离文档流,也就是说,当元素的兄弟元素发生位置变化时,相对定位元素的位置也会相应变化。
接下来是绝对定位,同样通过left、right、top、bottom属性来定位元素的位置。不同之处在于,它不依赖于元素原始位置,而是依赖于距离最近的已定位祖先元素进行定位。如果没有已定位祖先元素,它会以body元素为参考对象。例如:
p {
position: absolute;
left: 20px;
top: 10px;
}
这段代码将会将p元素相对于它最近的已定位祖先元素(或body元素)偏移20像素到左侧,10像素到上方。
绝对定位的元素在定位后,会脱离文档流,其他元素不会受到它的影响。
最后是固定定位,与绝对定位类似,但是它是相对于浏览器窗口固定位置进行定位,无论用户向上或向下滚动,元素都会保持不变。例如:
p {
position: fixed;
left: 20px;
top: 10px;
}
这段代码将会将p元素固定在浏览器窗口的左上角,距离浏览器窗口左侧20像素,距离浏览器窗口上侧10像素。
固定定位的元素也会脱离文档流,对其他元素没有影响。
以上就是CSS中定位的三种类型,它们的应用各异,可以根据需要进行选择。
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。