顶部 / 底部 / 左边 / 右边

top、bottom、left 和 right 属性与 position 一起使用，以设置元素的放置位置。它们只对定位元素有效，定位元素是指 position 属性设置为除 static 以外的任何值的元素。例如：relative、absolute、fixed 或 sticky。

div {
  <top || bottom || left || right>: <length> || <percentage> || auto || inherit;
}

例如，您可以使用它来调整图标的位置

button .icon {
  position: relative;
  top: 1px;
}

或在容器内放置一个特殊的元素。

.container {
  position: relative;
}
.container header {
  position: absolute;
  top: 0;
}

top、bottom、left 和 right 的值可以是以下任何值

• 任何有效的 CSS 长度
• 包含元素高度的百分比（对于 top 和 bottom）或宽度（对于 left 和 right）
• auto
• inherit

当值是正数时，元素通常会从给定的一侧移动，而当值是负数时，元素会朝该侧移动。在下面的示例中，top 的正长度使元素向下移动（远离顶部），top 的负长度使元素向上移动（朝向顶部）。

查看 CodePen 上 Matsuko Friedland 的示例
顶部：正值和负值 (@missmatsuko)
位于 CodePen 上。

定位

元素的放置位置与 top、bottom、left 或 right 的值以及 position 的值有关。让我们看看当我们在具有不同 position 值的元素上设置 top 的相同值时会发生什么。

static

top 属性对未定位元素（position 设置为 static 的元素）没有影响。这是元素默认的定位方式。您可以使用 position: static; 作为一种方法来取消 top 对元素的影响。

relative

当 top 设置在 position 设置为 relative 的元素上时，该元素将相对于其在文档中的原始放置位置向上或向下移动。

查看 CodePen 上 Matsuko Friedland 的示例
顶部：相对 (@missmatsuko)
位于 CodePen 上。

absolute

当 top 设置在 position 设置为 absolute 的元素上时，该元素将相对于其最近的定位祖先（如果不存在定位祖先，则相对于文档）向上或向下移动。

在这个演示中，左侧的粉色框从页面顶部向下定位了 50 像素，因为它没有定位的祖先元素。右侧的粉色框从其父元素的顶部向下定位了 50 像素，因为父元素的 position 为 relative。

查看 CodePen 上 Matsuko Friedland 的示例
顶部：绝对 (@missmatsuko)
位于 CodePen 上。

fixed

当 top 设置在 position 设置为 fixed 的元素上时，该元素将相对于浏览器的视窗向上或向下移动。

查看 CodePen 上 CSS-Tricks 的示例
顶部：固定 (@css-tricks)
位于 CodePen 上。

乍一看，absolute 和 fixed 之间似乎没有区别。当您在具有足够内容以滚动浏览的页面上比较它们时，就可以看到差异。当您向下滚动时，fixed 定位元素始终可见，而 absolute 定位元素则会滚动消失。

查看 CodePen 上 CSS-Tricks 的示例
滚动：固定与绝对 (@css-tricks)
位于 CodePen 上。

sticky

当 top 设置在 position 设置为 sticky 的元素上时，该元素将相对于具有滚动框的最近的祖先（如果祖先没有滚动框，则相对于视窗）向上或向下移动，但限制在包含元素的边界内。

除非包含元素比元素本身高，并且您有足够的滚动内容，否则在 sticky 定位元素上设置 top 并不会产生很大效果。与 fixed 一样，当您滚动时，该元素将保持可见。与 fixed 不同的是，该元素一旦到达包含元素的边缘，就会消失。

查看 CodePen 上 CSS-Tricks 的示例
滚动：固定与粘性 (@css-tricks)
位于 CodePen 上。

注意事项

设置相对侧

您可以在单个元素上为 top、bottom、left 和 right 设置值。当您为相对侧（top 和 bottom，或 left 和 right）设置值时，结果可能并不总是您期望的那样。

在大多数情况下，如果已经设置了 top，则会忽略 bottom，如果已经设置了 left，则会忽略 right。当 direction 设置为 rtl（从右到左）时，会忽略 left 而不是 right。为了使每个值都能产生效果，该元素必须将 position 设置为 absolute 或 fixed，并将 height 设置为 auto（默认值）。

在这个示例中，我们将 top、bottom、left 和 right 设置为 20px，并期望内部框的每一侧都距外部框的侧边 20px。

查看 CodePen 上 CSS-Tricks 的示例
设置顶部、底部、左边和右边 (@css-tricks)
位于 CodePen 上。

当固定不相对视窗时

position 设置为 fixed 的元素并不总是相对于视窗定位。如果存在，它将相对于其最近的祖先进行定位，该祖先的 transform、perspective 或 filter 属性设置为除 none 以外的任何值。

添加或删除空格

如果您已定位元素并发现现在存在空隙或缺少预期位置的空格，则可能与元素是否在文档流中有关。

当元素从文档流中移除时，意味着它最初在页面上占用的空间会消失。 当元素的定位为 absolute 或 fixed 时，就会出现这种情况。 在此示例中，绝对定位元素的包含框已折叠，因为绝对定位元素已从文档流中移除

查看 Pen
文档流 by Matsuko Friedland (@missmatsuko)
位于 CodePen 上。

浏览器支持

您可以 查看一下，但 top 属性没有跨浏览器问题。随意使用。