[分享]css中 上下左右 关键词

CSS中常用的位置属性有上下左右四种，也就是top、bottom、left和right。top用于设置元素相对于其包含块顶部的距离。可以使用像素值、百分比值或者负值。div { : relative;...

CSS中常用的位置属性有上下左右四种，也就是top、bottom、left和right。

top用于设置元素相对于其包含块顶部的距离。可以使用像素值、百分比值或者负值。

div {
  position: relative;
  top: 20px;
  /* 或者 */
  top: 10%;
  /* 或者 */
  top: -30px;
} 

bottom用于设置元素相对于其包含块底部的距离。同样可以使用像素值、百分比值或负值。

div {
  position: absolute;
  bottom: 20px;
  /* 或者 */
  bottom: 10%;
  /* 或者 */
  bottom: -30px;
} 

left用于设置元素相对于其包含块左侧的距离。同样可以使用像素值、百分比值或负值。

div {
  position: relative;
  left: 20px;
  /* 或者 */
  left: 10%;
  /* 或者 */
  left: -30px;
} 

right用于设置元素相对于其包含块右侧的距离。同样可以使用像素值、百分比值或负值。

div {
  position: absolute;
  right: 20px;
  /* 或者 */
  right: 10%;
  /* 或者 */
  right: -30px;
} 

这四种关键词可以用于任何使用position属性的元素中。配合使用可以实现各种各样的布局效果。