为什么有时候设置left、top、right、bottom值不起作用

为什么有时候设置left、top、right、bottom值不起作用？

因为css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative；

如：有一个名为box的div，有名为box1和box2的2个子元素，给box1、box2设置left、top值并不起作用。

当给元素添加了position属性时，left、top起了作用

当box1和box2的position值都为relative时，box1相对于最近的元素有top值、left值，box2相对于box1有top值、left值，从这个例子中可以看出box2在top距离上并不是距离父元素box顶部的距离，而是距离box1顶部 200px的距离。

如图：

当将box2的top值改成50px时，就知道是根据box1的顶部的top值来定位的

第二个问题：top值、left值、bottom、right值是相对于谁的值？

这些值都是相对于其包含块的值，从上例可以看出，当box1、box2都是position：relative时，box2的top值，是相对于box1顶部的。

当box1的position：absolute，box2的position：relative时，box2的top值就是相对于box这个父元素的，具体效果如图：

当box1、box2的position：absolute时，box1距离box顶部100px，box2距离box顶部50px。

当box1是position：relative，box2是position：absolute，也是box1距离box顶部100px，box2距离box顶部50px。

效果如下图：