定位 在 CSS 中

允许你手动在 HTML 中定位元素的 CSS 属性

分享此页面

最新！ 我的 44 页电子书“CSS 在 44 分钟内”已经发布！ 😃

立即获取 →

#bottom

根据元素的底部边缘定义元素的位置。

默认 bottom: auto;

元素将保留在它的自然位置。

bottom: 20px;

如果元素处于相对定位，则元素将向上移动 bottom 值定义的量。

bottom: 0;

如果元素处于绝对定位，则元素将从第一个定位的祖先的底部定位自身。

#left

根据元素的左边边缘定义元素的位置。

默认 left: auto;

元素将保留在它的自然位置。

left: 80px;

如果元素处于相对定位，则元素将向左移动 left 值定义的量。

left: -20px;

如果元素处于绝对定位，则元素将从第一个定位的祖先的左边定位自身。

#position

定义元素的定位行为。

默认 position: static;

元素将保留在页面的自然流中。

因此，它不会作为绝对定位的粉色块的锚点。

此外，它不会对以下属性做出反应

  • top
  • bottom
  • left
  • right
  • z-index

position: relative;

元素将保留在页面的自然流中。

它还使元素定位：它将作为绝对定位的粉色块的锚点。

此外，它将对以下属性做出反应

  • top
  • bottom
  • left
  • right
  • z-index

position: absolute;

元素不会保留在页面的自然流中。它将根据最近的定位祖先定位自身。

因为它已定位，它将作为绝对定位的粉色块的锚点。

此外，它将对以下属性做出反应

  • top
  • bottom
  • left
  • right
  • z-index

position: fixed;

元素不会保留在页面的自然流中。它将根据视窗定位自身。

因为它已定位，它将作为绝对定位的粉色块的锚点。

此外，它将对以下属性做出反应

  • top
  • bottom
  • left
  • right
  • z-index

#top

根据元素的顶部边缘定义元素的位置。

默认 top: auto;

元素将保留在它的自然位置。

top: 20px;

如果元素处于相对定位，则元素将向下移动 top 值定义的量。

top: 0;

如果元素处于绝对定位，则元素将从第一个定位的祖先的顶部定位自身。

#z-index

定义元素在z轴上的顺序。它只对定位元素（除了static之外的所有元素）有效。

默认 z-index: auto;

顺序由HTML 代码中的顺序定义

  • 代码中排在最前面 = 在后面
  • 代码中排在最后 = 在最前面

z-index: 1;

z-index 值是相对于其他值的。目标元素被移动到它兄弟元素的前面。

z-index: -1;

您可以使用负值。目标元素将移动到其兄弟元素后面。