详解div+css相对定位和绝对定位用法

详解div+css相对定位和绝对定位用法

相对定位相对比较简单，主要理解它是相对于自身原本的位置进行偏移的。例如，我们有这样两个子元素sub1和sub2，它们是同级关系。如果sub1设置了relative定位，例如：#sub1 { position: relative; padding: 5px; top: 5px; left: 5px; }，sub1的相对定位会根据top，right，bottom，left的值，将sub1按照它原本应该在的位置进行偏移。这里“相对”指的是相对于其原本位置的偏移，而不是相对于其他元素。

当我们设置sub1为relative后，sub1的位置就不再是默认文档流中的位置，而是根据top，right，bottom，left的值相对于其原本应该在的位置进行偏移。而sub2的位置则不会因此改变，因为它的定位方式没有改变，仍然按照原本的位置进行定位。

如果此时我们将sub2也设置为relative，sub2也将根据top，right，bottom，left的值相对于其原本应该在的位置进行偏移。值得注意的是，relative定位的偏移是基于对象的margin的左上侧。

绝对定位的属性则常常被误解为总是按照浏览器窗口进行定位，实际上，这其实是固定定位固定定位的特点。当sub1的position设置为absolute后，其定位依据是什么？这里分为两种情况：第一种情况是，当sub1的父元素（或曾祖父元素，只要是有父级关系）也设置了position属性，且position的属性值为absolute或者relative时，sub1就会按照这个父元素进行定位。

需要注意的是，虽然已经确定了定位对象，但具体定位点的选取还需要注意，如果父元素设置了margin，border，padding等属性，定位点将忽略padding，从padding的左上角开始进行定位。这与我们通常认为的以margin左上端为定位点有所不同。

第二种情况是，如果sub1没有一个设置了position属性的父元素，则sub1将以body为定位对象，按照浏览器窗口进行定位。这种情况下，sub1会从body开始定位，而不会影响文档流中的其他元素。

理解了相对定位和绝对定位的原理后，我们就可以在实际开发中灵活运用，实现各种复杂和美观的布局效果。2024-12-27