CSS定位方式是position的属性应用。

1）position属性

position的属性如下：

• 默认值：static
• 绝对位置：absolute

将对象从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。支持层叠通过z-index属性定义。left这些元素的值有三种表示方法：auto、长度值、百分比。auto为默认值。

例如：

position : absolute;

left : 10px;

top : 20px;

距离顶端20像素，距离左侧10像素位置。

• 页面滚动，元素不随之动：fixed

fixed就是固定不动，不随网页滚动而滚动。

例如：

position : fixed;

• 相对位置，对象不可层叠：relative

对象不可以层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。

例如：

position : relative;

2）absolute与relative区别

absolute（绝对位置）与relative（相对位置）区别：

• 前者可以层叠，支持z-index属性；
• 前者从文档流中拖出，后者还在正常文档流中；
• 前者相对父元素，使用left：10px；等进行定位，后者相对自身进行定位；
• 前者移动后，可通过z-index设置堆放次序，后者移动后，覆盖其他元素。

随机文章