css中postion的fixed与absolute区别详解

关于我对Position定位方式的理解笔记

在网页布局中，我们经常使用CSS的position属性进行元素的定位。这个属性有四种定位方式：fixed、absolute、relative和static。我对其中的几个定位方式一直有些困惑，现在特地记录下来，并分享一个例子以帮助理解。

我们来说说fixed定位。这是一种固定定位方式，它的参照位置是浏览器窗口的左上角，坐标点始终为(0px, 0px)。无论页面如何滚动，它都会固定在同一个位置。

接下来是absolute绝对定位。这种定位方式的参考位置是离当前元素最近的已定位祖先元素的左上角。如果没有已定位的祖先元素，那么它的参考位置就是整个文档的左上角。举个例子来说明：

假设我们有如下的HTML结构：

```html

```

在这个例子中，h2元素的绝对定位参照点是它的父元素id为p2的左上角。因为p2设置了fixed定位，所以它成为了最近的已定位祖先元素。而id为p3的元素由于使用的是static静态定位，它不能作为定位参考点。

通过这个例子，我们可以更好地理解absolute定位的工作原理。当我们需要精确地放置某个元素时，绝对定位是非常有用的。它可以让我们无视文档流，直接将元素放置到指定的位置。结合其他定位方式，我们可以创建复杂的布局效果。

希望这篇笔记能够帮助大家更好地理解position的定位方式。如果你还有其他疑问或者需要进一步的解释，请随时向我提问。