顶部

**top** CSS 属性设置 定位元素 的垂直位置。此 内边距属性 对非定位元素没有影响。

试用

top 的效果取决于元素的定位方式（即，position 属性的值）。

  • 当 position 设置为 absolute 或 fixed 时，top 属性指定元素上边缘的外边距与包含块上边缘的内边框之间的距离，或者，在 锚点定位元素 的情况下，当 anchor() 函数在值中使用时，相对于指定的 <anchor-side> 边缘。top 属性与 top、bottom、start、end、self-start、self-end、center 和 <percentage> 值 兼容。
  • 当 position 设置为 relative 时，top 属性指定元素上边缘在其正常位置下方移动的距离。
  • 当 position 设置为 sticky 时，top 属性用于计算粘性约束矩形。
  • 当 position 设置为 static 时，top 属性没有效果。

当同时指定 top 和 bottom 值时，有三种不同的情况。

  • 如果 position 设置为 absolute 或 fixed 并且 height 未指定（auto 或 100%），则 top 和 bottom 值都将被尊重。
  • 如果 position 设置为 relative 或 height 受约束，则 top 属性优先，bottom 属性被忽略。
  • 如果 position 设置为 sticky，则 top 和 bottom 值都将被考虑。这意味着粘性元素可以根据这两个属性的值在其包含块内向上和向下移动，只要元素的位置框保持在其包含块内。

语法

css
/* <length> values */
top: 3px;
top: 2.4em;
top: anchor(bottom);
top: calc(anchor(--myAnchor 50%) + 10px);

/* <percentage>s of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;

值

<length>

一个负数、空值或正数的 <length>，表示

  • 对于绝对定位元素，与包含块上边缘的距离。
  • 对于 锚点定位元素，anchor() 函数解析为相对于关联的锚点元素上或下边缘位置的 <length> 值。
  • 对于相对定位元素，元素在其正常位置下方移动的距离。
<percentage>

包含块高度的 <percentage>。

auto

指定

  • 对于绝对定位元素，元素的位置基于bottom属性，而height: auto则被视为基于内容的高度；或者如果bottom也为auto，则元素将定位在如果它是一个静态元素应该垂直定位的位置。
  • 对于相对定位元素，元素与其正常位置的距离基于bottom属性；或者如果bottom也为auto，则元素根本不会垂直移动。
继承

指定该值与其父元素的计算值相同（可能不是其包含块）。然后将此计算值处理为<length>、<percentage>或auto关键字。

正式定义

初始值auto
应用于定位元素
继承否
百分比引用包含块的高度
计算值如果指定为长度，则为相应的绝对长度；如果指定为百分比，则为指定的值；否则为auto
动画类型一个长度、百分比或calc()；

正式语法

top = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

一个定位元素，距离顶部 10%

css
body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
html
<div>The size of this content is determined by the position of its edges.</div>

规范

规范
CSS 定位布局模块级别 3
# 内边距

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见