【问题标题】:CSS 'absolute' positioning: what is the behavior when there is no non-static ancestor?CSS“绝对”定位:没有非静态祖先时的行为是什么?
【发布时间】:2018-10-19 22:43:17
【问题描述】:

“绝对”定位的定义是:“元素的定位是相对于它的第一个定位(非静态)祖先元素”。

我的问题是当所有祖先都是“静态”时元素的行为如何?

我们可以说在这种情况下,“绝对”定位表现为“固定”定位吗?

【问题讨论】:

  • @Temani Afif:除了极端情况外,它的行为并不固定。看我的回答。

标签: css


【解决方案1】:

我们可以说在这种情况下,“绝对”定位表现为“固定”定位吗?

不,不完全是。 toprightbottomleft 偏移的行为是相同的,但对于滚动则不同,这是固定定位与常规绝对定位的区别。

当没有定位的祖先时,带有position: absolute的元素的包含块是初始包含块。

带有position: fixed 的元素的包含块是视口,而不是初始包含块。滚动时视口不会移动,但初始包含块会移动(因为它可能比视口大),这就是为什么固定位置的元素不会随页面滚动,但带有position: absolute 的元素会移动,即使当后者没有定位的祖先。

您可以操纵页面布局以使内容滚动,但初始包含块永远不会滚动,resulting in a hack that makes position: absolute with no positioned ancestors behave like position: fixed,即使在 Internet Explorer 6 中也是如此。

【讨论】:

  • CSS 2.2 10.1 1 表示对于连续媒体,初始包含块具有视口的尺寸。 Fpr 分页媒体没有视口。初始包含块何时可以大于视口?
  • @Alohci:你说得对,我不确定我是如何得出这个结论的。大概,然后,当内容大于视口时,它会溢出它和初始包含块,导致滚动,但不会导致初始包含块扩展。我认为发生的事情是内容在画布上占据了更大的区域(IIRC 是无限大的)。
猜你喜欢
  • 1970-01-01
  • 2018-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多