CSS 绝对定位

絶対位置に設定された要素のフレームは、文書フローから完全に削除され、包含ブロックに対して位置付けられます。包含ブロックは、文書内の別の要素または初期の包含ブロックである可能性があります。要素が通常の文書フロー内で占めていた空間は閉じられ、その要素が存在しなかったかのようになります。要素が定位されると、元々どのような種類のフレームを生成していたかに関わらず、ブロックフレームが生成されます。

CSS 绝对定位

絶対位置は要素の位置を文書フローに関連付けることなく設定するため、空間を占めません。これは相対位置とは異なり、相対位置は実際には通常のフロー位置モデルの一部と見なされます。なぜなら、要素の位置は通常のフロー内の位置に対して設定されるからです。

通常のフロー内の他の要素のレイアウトは、絶対位置の要素が存在しないかのようです:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示:

CSS 相对定位实例

绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块

对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。

提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS 相对定位实例

定位:绝对定位
本例演示如何使用绝对值来对元素进行定位。