background-position などで背景画像などの位置を指定する際に用いられます。詳細は使用例を参照してください。

.box {
  display: inline-block;
  border: 1px solid #999;
  width: 10rem;
  height: 5rem;
  background-image: url(../../image/kingyo.gif);
  background-repeat: no-repeat;
  margin-bottom: .5rem;
}
.top { background-position: top; }                   /* 上 / 左右中央 */
.left { background-position: left; }                 /* 左 / 上下中央 */
.left-bottom { background-position: left bottom; }   /* 左下 */
.rem1 { background-position: 1rem; }                 /* 左から1rem / 上下中央 */
.rem1-1 { background-position: 1rem 1rem; }          /* 左から1rem / 上から1rem */
.rem1-2 { background-position: 1rem 2rem; }          /* 左から1rem / 上から2rem */
.rem1-3 { background-position: 1rem 3rem; }          /* 左から1rem / 上から2rem */
.per20 { background-position: 20%; }                 /* 左から20% / 上下中央 */
.per20-20 { background-position: 20% 20%; }          /* 左から20% / 上から20% */
.per20-40 { background-position: 20% 40%; }          /* 左から20% / 上から40% */
.per20-60 { background-position: 20% 60%; }          /* 左から20% / 上から60% */
.t2-l5 { background-position: top 2rem left 5rem; }  /* 上から2rem / 左から5rem */

<div class="box">&nbsp;</div>
<div class="box top">top</div>
<div class="box left">left</div>
<div class="box left-bottom">left bottom</div>
<div class="box rem1">1rem</div>
<div class="box rem1-1">1rem 1rem</div>
<div class="box rem1-2">1rem 2rem</div>
<div class="box rem1-3">1rem 3rem</div>
<div class="box per20">20%</div>
<div class="box per20-20">20% 20%</div>
<div class="box per20-40">20% 40%</div>
<div class="box per20-60">20% 60%</div>
<div class="box t2-l5">top 2rem left 5rem</div>

• https://developer.mozilla.org/ja/docs/Web/CSS/position_value
• https://drafts.csswg.org/css-values/#position