containing block and position

css中的position属性的取值top,left等都是相对于containing block而言的。

containing block不是一个单纯的概念,需要经过一定的规则计算处来。

containing block

containing block在规范中的定义比较啰嗦:

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

  1. The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element.
  2. For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.
  3. If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media.
  4. If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
    • In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element. In CSS 2.1, if the inline element is split across multiple lines, the containing block is undefined.
    • Otherwise, the containing block is formed by the padding edge of the ancestor.
      If there is no such ancestor, the containing block is the initial containing block.

用一张图概括如下:

containing block --image by zoubin

Box dimensions

containing box的定义中涉及到Box dimensions的概念,下面摘录的是规范中关于Box dimensions的一部分描述:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

  • content edge or inner edge
  • padding edge
  • border edge
  • margin edge or outer edge

box dimensions

其中position:absolute的元素使用的containing block就是padding edge

Tips

关于position还有几点需要注意:

  • This property(top) specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
  • when with percentage value, top and left etc refer to height/width of containing block

reference

comments powered by Disqus