CSS position属性

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

定位类型

static

默认值，该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和z-index属性无效。

relative

  • 元素框偏移某个距离，原本所占空间仍保留；
  • 未设置top, right, bottom, left属性时表现与static相同。

absolute

  • 脱离文档流，相对于最近的非 static 定位祖先元素定位；
  • 如果绝对定位的元素没有最近的非 static 定位祖先元素，那么它相对于文档的body元素定位。

fixed

  • 相对于屏幕视口（viewport，浏览器窗口内的内容区域，不包含工具栏、标签栏等，也就是网页实际显示的区域）定位。

sticky

  • 粘性定位，相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

  • 兼容性

对元素的影响

元素被设为position: absolute之后，其display计算值就变为block，尽管其表现形式和inline-block类似–包裹内部元素且不超出包含块的特性。

1
2
3
4
5
6
var span = document.createElement('span');
document.body.appendChild(span);
console.log(window.getComputedStyle(span).display); // inline

span.style.position = 'absolute';
console.log(window.getComputedStyle(span).display); // block

元素设置了position: absolute或fixed之后，如果没有设置top, right, bottom, left属性，浏览器会默认将这些属性设置成auto，而auto的值是该元素的“默认位置”。即设置position: absolute或fixed前后的offsetTop和offsetLeft属性值不变。

position为static或relative的元素，设置width或height为百分比时，相对的是父容器的content；

position为absolute的元素，设置width或height为百分比时，相对的是定位父容器的padding+content；

position为fixed的元素，设置width或height为百分比时，相对的是浏览器内容区域（不包括滚动条）的宽高。