css 绝对相对定位 |css点击图片切换图片

绝对定位

position: absolute;
top: 0px;
left: 0px;

上面的代码就是绝对定位的基本语法，其中position属性设置为absolute，表示绝对定位；top和left属性设置为0px，表示元素距离父元素（最近定位祖先元素）的顶部和左侧都是0像素。

通过设置top、right、bottom、left属性值，可以控制元素的偏移方向和距离，如下例：

position: absolute;
top: 50px;
right: 50px;

上面的代码会使元素距离最近定位祖先元素的顶部偏移50像素，距离其右侧偏移50像素。

相对定位

position: relative;
top: 0px;
left: 0px;

相对定位也可以使用top和left属性来进行调整，但不同于绝对定位，它是相对于元素本来的位置进行移动的。如下例：

position: relative;
top: 20px;
left: 20px;

上面的代码会使元素距离它原来的位置向下偏移20像素，向右偏移20像素。

绝对与相对定位的区别

使用绝对定位时，元素会忽略它在文档流中的位置，相对于它的最近的已经定位的祖先元素进行移动。而使用相对定位时，元素会相对于它自身原来的位置进行移动。

可以使用z-index属性对定位元素进行层级控制。从z-index的值上看，z-index值越大的元素越靠近屏幕顶部，而z-index值越小的元素越靠近屏幕底部。

绝对定位和相对定位在实际开发中常常用于修正元素位置，使其达到更好的视觉效果。需要注意的是，在使用绝对定位时，应该指定元素的最近定位祖先元素（通过设置其父元素的position属性），以确保正确的偏移效果。