relative 和 absolute 元素的百分比定位

栏目: Html · 发布时间: 4年前

内容简介:有人住高楼,有人在深沟,有人光万丈,有人一身锈,世人万千种,浮云莫去求,斯人若彩虹,遇上方知有。——电影《怦然心动》

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

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

——电影《怦然心动》

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

relative 元素是相对自身定位的;absolute 元素是相对于最近的 position 属性值不是 static (也就是 fixed , absolute , relativesticky )的祖先元素定位的。

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

零、left: 0

relative 和 absolute 元素的百分比定位

注意

relative 元素是相对包含块(containing block)的 content box 区域定位的;absolute 元素是相对包含块的 padding box 区域定位的。

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

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

relative 和 absolute 元素的百分比定位

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

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

一、left: 50%

relative 和 absolute 元素的百分比定位

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

第一个:元素相对原来的位置(虚线矩形框)向左偏移半个包含块宽度(准确说是 content box width/2 的距离)。

第二个:元素定位在距离包含块左边缘 50% 的距离,这个 50% 就是半个包含块宽度(准确说是 padding box width/2 的距离)。

二、top: 50%

relative 和 absolute 元素的百分比定位

与上面同理。

三、right: 50%/right: 100%

relative 和 absolute 元素的百分比定位

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

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

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

relative 和 absolute 元素的百分比定位

四、bottom: 50%/bottom: 100%

relative 和 absolute 元素的百分比定位

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

relative 和 absolute 元素的百分比定位

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


以上所述就是小编给大家介绍的《relative 和 absolute 元素的百分比定位》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Google

Google

托马斯·舒尔茨(Thomas·Schulz) / 严孟然、陈琴 / 当代中国出版社 / 2016-11-1 / CNY 49.80

想要掌握未来,必须了解谷歌 1998年从车库起家,短短数年研发上千项专利,2016年力压苹果、亚马逊,成为“世界最具价值品牌”“最佳雇主”,谷歌无疑是互联网时代的最大赢家,这家公司有能力通过巨额广告利润收获现在,更有意愿在人工智能层面创造未来。 据说谷歌势不可挡,永不餍足。从互联网搜索到智能翻译再到地图导航,谷歌是我们通向世界的门户。不仅如此,就像管理全世界的数据流一样,谷歌还要在不久......一起来看看 《Google》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码