有人住高楼,有人在深沟,有人光万丈,有人一身锈,
世人万千种,浮云莫去求,斯人若彩虹,遇上方知有。
——电影《怦然心动》
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)😀。如果能在文章下面留下你宝贵的评论或意见是再合适不过的了,因为研究证明,参与讨论比单纯阅读更能让人对知识印象深刻😉~。
(完)