left
和top
属性来设置元素的水平位置和垂直位置。.box { position: relative; left: 100px; top: 50px; }
上述代码中的left: 100px;
表示元素距离其父级元素左边缘的距离为 100px。如果将值设置为负数,元素就会向左移动。相反地,如果将值设置为正数,元素就会向右移动。
同样地,top: 50px;
表示元素距离其父级元素上边缘的距离为 50px。如果将值设置为负数,元素就会向上移动。相反地,如果将值设置为正数,元素就会向下移动。
当元素的定位方式为绝对定位时,元素的位置会相对于其最近的已定位祖先元素的左上角进行定位:
.parent { position: relative; } .child { position: absolute; left: 50px; top: 50px; }
上述代码中的.child
元素相对于其最近的已定位祖先元素.parent
进行定位,距离其左边缘和上边缘分别为 50px。
通过设置元素的 X Y 值,大家可以轻松地在页面上调整元素的位置,实现各种布局效果。