CSS 翻译 X 和 Y

简介

在 CSS 中，X 和 Y 分别表示水平方向和垂直方向的坐标系。在网页布局中，经常需要设置元素在 X 和 Y 方向上的偏移量或位置。本篇文章将介绍如何使用 CSS 翻译 X 和 Y 。

翻译 X

偏移量

语法：

left: <offset>;
right: <offset>;

说明：

• left 表示元素相对于其父元素左边缘的偏移量；
• right 表示元素相对于其父元素右边缘的偏移量；
• <offset> 可以是一个长度值，如 10px ，也可以是一个百分比值，如 50% 。

示例：

div {
  position: relative;
  left: 20px;
  top: 10px;
}

定位

语法：

position: <position>;
left: <length>;
top: <length>;
right: <length>;
bottom: <length>;

说明：

• position 可以取值 static （默认值）、 relative 、 absolute 和 fixed ；
• <length> 表示元素相对于其定位父元素的偏移量。若没有定位父元素，则相对于文档流。

示例：

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

翻译 Y

偏移量

语法：

top: <offset>;
bottom: <offset>;

说明：

• top 表示元素相对于其父元素顶部的偏移量；
• bottom 表示元素相对于其父元素底部的偏移量；
• <offset> 可以是一个长度值，如 10px ，也可以是一个百分比值，如 50% 。

示例：

div {
  position: relative;
  left: 20px;
  top: 10px;
}

定位

语法：

position: <position>;
left: <length>;
top: <length>;
right: <length>;
bottom: <length>;

说明：

• position 可以取值 static （默认值）、 relative 、 absolute 和 fixed ；
• <length> 表示元素相对于其定位父元素的偏移量。若没有定位父元素，则相对于文档流。

示例：

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

总结

本篇文章介绍了 CSS 中如何翻译 X 和 Y ，包括偏移量和定位两种方式。通过简单的示例，希望对读者在网页布局中的实践有所帮助。