CSS的定位主要包含静态定位(Static)、相对定位(Relative)、绝对定位(Absolute)和固定定位(Fixed)。每种定位都有其特点,以及不同的定位方式是基于不同的参照对象进行计算的。
1. 静态定位(Static):
特点:元素正常地位于页面上,不会受top、bottom、left、right等属性的影响。也就是说,如果没有明确地指定其他定位方式,元素默认就是静态定位。
相对于什么进行定位:静态定位是相对于正常的文档流进行定位的。
2. 相对定位(Relative):
特点:元素相对于其正常位置进行定位。这意味着你可以通过top、bottom、left、right等属性将元素相对于其原始位置进行移动。其他元素的位置也会相应地调整以填补其留下的空间。
相对于什么进行定位:相对定位是相对于元素在文档流中的原始位置进行定位的。
3. 绝对定位(Absolute):
特点:元素的位置相对于最近的已定位的祖先元素(而非正常文档流)。如果没有已定位的祖先元素,那么它的位置就相对于最初的包含块。使用绝对定位时,元素的位置可以设置具体的像素值,也可以设置百分比来相对其包含块的大小进行调整。此时,元素的顶部和左侧都可以由任意数量的“正”或“负”值来决定。
相对于什么进行定位:绝对定位是相对于最近的已定位的祖先元素或初始包含块进行定位的。
4. 固定定位(Fixed):
特点:元素的位置相对于浏览器窗口是固定位置,即使窗口被滚动,它也会始终停留在同一的位置上。这种类型的定位通常用于需要始终显示在屏幕上的元素,如导航栏或侧边栏等。
相对于什么进行定位:固定定位是相对于浏览器窗口进行定位的。
以上就是CSS的四种主要定位方式及其特点,以及它们各自是相对于什么进行定位的。这些定位方式为开发者提供了强大的工具来控制页面元素的布局和位置。