CSS定位屬性：top、left、right和bottom

CSS定位屬性（Positioning properties）用於指定元素在父容器中的位置與大小。常見的定位屬性有：position、top、left、right和bottom。其中，top、left、right和bottom這四個屬性是控制定位元素位置的關鍵屬性，這篇文章將詳細介紹它們的使用方法。

一、top屬性

top屬性用於設置元素的頂部邊緣相對於其父容器頂部邊緣的偏移量。top屬性的取值可以是像素值、百分比、em、rem等單位。

.example {
  position: absolute;
  top: 50px;
}

上述代碼將設置class為example的元素的頂部邊緣與其父容器的頂部邊緣相差50像素的位置。

如果要讓元素在父容器的中間位置，則可以應用以下樣式：

.example {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

上述樣式會令元素的頂部邊緣與其父容器頂部相差50%的距離，而其transform樣式則會使元素水平居中。

二、left屬性

left屬性用於設置元素的左邊緣相對於其父容器左邊緣的偏移量。left屬性的取值可以是像素值、百分比、em、rem等單位。

.example {
  position: absolute;
  left: 100px;
}

上述代碼將會使class為example的元素的左邊緣與其父容器的左邊緣相差100像素。

三、right屬性

right屬性用於設置元素的右邊緣相對於其父容器右邊緣的偏移量。right屬性的取值可以是像素值、百分比、em、rem等單位。

.example {
  position: absolute;
  right: 50px;
}

上述代碼將會使class為example的元素的右邊緣與其父容器的右邊緣相差50像素。

四、bottom屬性

bottom屬性用於設置元素的底部邊緣相對於其父容器底部邊緣的偏移量。bottom屬性的取值可以是像素值、百分比、em、rem等單位。

.example {
  position: absolute;
  bottom: 20%;
}

上述代碼將會使class為example的元素的底部邊緣與其父容器的底部邊緣相差20%的距離。

總結

• top屬性可以控制元素的頂部位置；
• left屬性可以控制元素的左邊位置；
• right屬性可以控制元素的右邊位置；
• bottom屬性可以控制元素的底部位置。

這些屬性可以與position屬性一起使用，實現元素的精確定位。