css元素与元素相对定位 |css相应式布局

相对定位的关键字是position: relative;。当应用于一个元素后，该元素就变成了相对定位元素，其位置可以通过left、right、top和bottom属性进行微调。

.example {
position: relative;
left: 20px;
top: 10px;
}

在上面的例子中，.example元素被设置为相对定位，然后向右和向上各移动了20px和10px。

相对定位也可以被用于相对于其他元素进行微调。假设大家有两个元素，一个是.box1，另一个是.box2。为了使.box2元素相对于.box1进行微调，大家可以像下面这样写：

.box1 {
position: relative;
}
.box2 {
position: relative;
left: 20px;
top: 10px;
}

在这种情况下，.box2元素向右和向上各移动了20px和10px，但它们的相对位置并未改变。

需要注意的是，相对定位只是一种微调元素位置的方法，它不会改变文档中元素的布局。如果您想要更彻底地改变元素的位置和布局，可以考虑使用其他定位方法，如绝对定位（absolute positioning）或固定定位（fixed positioning）。