内容简介：有人住高楼，有人在深沟，有人光万丈，有人一身锈，世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。——电影《怦然心动》
有人住高楼，有人在深沟，有人光万丈，有人一身锈，
世人万千种，浮云莫去求，斯人若彩虹，遇上方知有。
——电影《怦然心动》
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吗？
- 技术攻坚，行业落地，百分点大力拓展认知智能蓝图
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Seasoned Schemer
Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 38.00
drawings by Duane Bibbyforeword and afterword by Guy L. Steele Jr.The notion that "thinking about computing is one of the most exciting things the human mind can do" sets both The Little Schemer (form......一起来看看 《The Seasoned Schemer》 这本书的介绍吧!
