绝对定位遵循什么层次结构

  • 本文关键字:层次结构 定位 css
  • 更新时间 :
  • 英文 :


当父对象不是绝对或相对时,我在理解绝对定位时遇到问题。我知道绝对定位将基于相对于其父对象的偏移来放置自己,可以是相对的,也可以是绝对的
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: relativebody以避免与视口混淆的原因。

将元素指定为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/

最新更新