relative 和 absolute 元素的百分比定位

有人住高楼，有人在深沟，有人光万丈，有人一身锈，

世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。

——电影《怦然心动》

relative/absolute 元素都支持 top/right/bottom/left 属性定位。

relative 元素是相对自身定位的；absolute 元素是相对于最近的 position 属性值不是 static（也就是 fixed, absolute, relative 或 sticky）的祖先元素定位的。

下面看图说话（图中的两个内部元素同时设置了 left: 0）。

零、left: 0

注意

relative 元素是相对包含块（containing block）的 content box 区域定位的；absolute 元素是相对包含块的 padding box 区域定位的。

为了方便，图中的两个外部元素（即 static 和 relative）没有设置 padding 值。

假设外部元素有 padding: 20px 的设置。当对内部两个元素同时设置 left: 0 后，效果是这样的。

再次提醒一下，为了方便，本篇文章中两个外部元素没有设置 padding 值。

下面同时给内部（即有红色边框的）元素设置相同的 top/right/bottom/left 百分比值查看效果。

一、left: 50%

效果看起来是一样的，元素向左偏移了半个包含块的宽度，但本质是：

第一个：元素相对原来的位置（虚线矩形框）向左偏移半个包含块宽度（准确说是 content box width/2 的距离）。
第二个：元素定位在距离包含块左边缘 50% 的距离，这个 50% 就是半个包含块宽度（准确说是 padding box width/2 的距离）。

二、top: 50%

与上面同理。

三、right: 50%/right: 100%

啊哈，现在能看出区别了吧。

relative 元素是相对自身向右偏移 50% 距离的；absolute 则表示元素距离包含块右边缘 50% 的距离。

下面是设置 right: 100% 的情况。

四、bottom: 50%/bottom: 100%

再来看看 bottom: 100% 的情况。

本篇文章使用的例子代码在这里查看。

贡献指北

感谢你花费宝贵的时间阅读这篇文章。

如果你觉得这篇文章让你的生活美好了一点点，欢迎给我鲜（diǎn）花（zàn）或鼓（diǎn）励（zàn）?。如果能在文章下面留下你宝贵的评论或意见是再合适不过的了，因为研究证明，参与讨论比单纯阅读更能让人对知识印象深刻，假期愉快?~。

（完）

转载于:https://juejin.im/post/5d038929f265da1b725bffcc