当父对象不是绝对或相对时,我在理解绝对定位时遇到问题。我知道绝对定位将基于相对于其父对象的偏移来放置自己,可以是相对的,也可以是绝对的If the parent is not absolute or relative? Will it position itself to the nearest absolute or relative element. Or will it position itself relative to the body?
当父母是相对的或绝对的时,我没有问题。如果父母是静态的,我很难理解会发生什么。绝对元素将如何放置自身
此处定义:http://www.w3.org/TR/css3-positioning/#def-cb
该参考文献的相关简介:
对于固定、绝对、中心和页面,其定义如下:
如果元素具有"position:absolute",则包含块为由具有不同于静态的位置的最近祖先建立,以以下方式:1.在祖先是块级的情况下,包含块由祖先的填充边缘形成。2.在祖先是内联级别的情况下,包含块取决于祖先的方向属性。。。
和
如果没有这样的祖先,则包含块是初始块包含块
更多详细信息请点击此处:http://www.w3.org/TR/CSS2/visudet.html#containing-区块详细信息
因此,要直接回答您的问题,包含块是由最近的祖先建立的,其位置不是静态的。如果没有这样的祖先,那么包含块就是初始包含块。这恰好是html
。这就是为什么许多开发人员选择提供position: relative
到body
以避免与视口混淆的原因。
将元素指定为absolute
本质上会使其脱离网页的"正常"流。
这本质上意味着,通过指示绝对定位的元素根据其最近的relative
父元素位于某些点,可以将它们放置在页面上的任何位置。
默认情况下,大多数元素继承static
的位置,这意味着它们在页面上按照"应该"的方式形成(基本上是指,根据指定的位置,它们一个接一个地排列)。引用CSS Tricks的Chris Coyier的话,位置relative
几乎意味着"相对于它自己",所以仅仅指定一个元素为相对元素基本上与将其保留为static
相同,除非你指示它以其他方式定位自己。
请记住,如果您将一个元素设置为absolute
,它将查找它最接近的相对父级-它将在DOM树上越来越高地查找,直到找到一个,如果没有其他标记定义为relative
,则有时可能是<html>
标记本身。
下面的链接比我能更好地解释这个话题,请查看:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/