CSS定位布局-position属性

CSS定位布局

position属性

定义

CSS 中的position属性用于指定当前元素在文档中的定位方式。

定位位置

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。
下列属性决定元素所在的最终位置

• top
• bottom
• left
• right

定位类型

• 定位元素
  选择relative，absolute，fixed，sticky的一个元素，static除外。
• 相对定位元素
  具备relative属性的元素
• 绝对定位元素
  具备absolute，fixed属性的元素
• 粘性定位元素
  具备sticky属性的元素
  注意：在绝对定位中，height和width被设定为auto，可以使用top和bottom来设置y方向上的位置。

语法

/* 绝对定位 */

div {
    position: absolute;
}


/* 相对定位 */

.div {
    position: relative;
}

区别

• static
  HTML 元素默认情况下的定位方式为 static（静态）。
  静态定位的元素不受 top、bottom、left 和 right 属性的影响。
  position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：
• relative
  设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
• absolute
  元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
  如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
  注意：“被定位的”元素是其位置除 static 以外的任何元素。
• fixed
  相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
  固定定位的元素不会在页面中通常应放置的位置上留出空隙。
• sticky
  元素根据用户的滚动位置进行定位。
  说明：这里的粘性定位按照该元素先按照相对定位的方式进行定位，当滚动页面的时候到达设定值的时候粘在该位置。
  注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。