css_position中的4种定位

Posted 2021-11-23 wush-1215

　　position在页面的布局中很常见，其有四个属性，分别为static、fixed、relative、absolute。

---

position: static;

　　相当于没有定位，元素会出现在正常的文档流中。写不写都没关系。

position: fixed;

　　元素框的表现类似于absolute，但是fixed是相对于视窗本身，也就是浏览器窗口而定位的。所以，采用该定位的元素在页面下拉的时候，其位置并不会发生变化。

position: relative;

　　生成相对定位的元素，相对于元素本身的位置进行定位，它原本所占的空间仍然会保留。

position: absolute;

　　生成绝对定位的元素，相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位，所以absolute定位实际上就是相对于有定位的第一个祖先元素定位，如果所有的祖先元素都没有定位，则相对于初始包含块或者画布，一般就是body元素定位。

父相对，子绝对。