内容简介：有人住高楼，有人在深沟，有人光万丈，有人一身锈，世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。——电影《怦然心动》
有人住高楼，有人在深沟，有人光万丈，有人一身锈，
世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。
——电影《怦然心动》
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% 的情况。
本篇文章使用的例子代码在这里查看。
以上所述就是小编给大家介绍的《relative 和 absolute 元素的百分比定位》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- YCProgress自定义百分比进度条
- 如何开发一个百分比饼状图动画
- javascript – 具有百分比宽度的jQuery砖石
- SQL Server数据库按百分比查询出表中的记录数
- php – 可以安全地将经过解码的百分比编码的URI转换成UTF-8吗？
- 技术攻坚，行业落地，百分点大力拓展认知智能蓝图
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
人人都是架构师：分布式系统架构落地与瓶颈突破
高翔龙 / 电子工业出版社 / 2017-5 / 69
《人人都是架构师：分布式系统架构落地与瓶颈突破》并没有过多渲染系统架构的理论知识，而是切切实实站在开发一线角度，为各位读者诠释了大型网站在架构演变过程中出现一系列技术难题时的解决方案。《人人都是架构师：分布式系统架构落地与瓶颈突破》首先从分布式服务案例开始介绍，重点为大家讲解了大规模服务化场景下企业应该如何实施服务治理；然后在大流量限流/消峰案例中，笔者为大家讲解了应该如何有效地对流量实施管制，避......一起来看看 《人人都是架构师：分布式系统架构落地与瓶颈突破》 这本书的介绍吧!
