CSS3 positioning | Position research_html/css_WEB-ITnose

Viewport (viewport)

When the viewer views a web page document, usually user agents (User Agents, UA, browser) will provide The viewer has a viewport (window or other visible area in the screen). When we resize the viewport, UA may change the layout of the document.

When the viewport is smaller than the Canvas area presented by the file, UA may provide a scroll mechanism to let you have a glimpse of the entire file. Theoretically, each Canvas can only have at most one viewport, but UA can generate more than one Canvas (for example, providing different visual areas on the same document, such as a frame grid).

Bearer block (containing block)

If the position and size of some boxes are calculated based on the edges of other related "rectangular boxes", we will " Rectangular blocks are called Containing Blocks. To put it simply, the so-called carrying block refers to the block-level parent element closest to "the element"; regardless of the positioning or floating of "the element", it is based on its carrying block as a reference datum (except fixed positioning method).

The bottom is a simple schematic diagram of the bearer block (the bearer block of demo-two is demo-one).

When the parent element is a block element, the size of its carrying block is the distance to the inner edge.

When the parent element is a single column element, the size of its carrying block is to the edge of the content.

Normal flow direction (normal flow)

What is normal flow direction? The direction from top to bottom and from left to right is the so-called normal flow; let's take Hyperfile Markup Language as an example. The direction of writing the source code is from top to bottom and from left to right. This is the normal flow. The browser also interprets (literally translates) our source code based on this trend.

To put it another way, in most cases, normal flow refers to the way element tags are displayed on a web page. In addition, most HTML element tags belong to inline box or blockbox. A block box can contain an inline box; conversely, an inline box cannot contain a blockbox.

Position

所属的	设定值
位置 定位	静态 | 相对 | 绝对 | 中心 | 页 | 固定
预设2006/02/15：静态 适用于：除了表列组与表列之外的全部元素 继承性：无

is used to position the box generated by the HTML element at the position where we want it to be rendered.

Static positioning|Static positioning

Position according to the order when writing the source code. To put it bluntly, it means that the boxes generated by the HTML elements we write in order allow them to be naturally arranged where the original flow direction should be. staticThere is no need to specify this value because it is the default value, which means that all box elements are initially in their original positions. And the four attributes bottom, left, right and top are not applicable.

Relative positioning|Relative positioning

Relative to the original position (not relative to the position of other elements). Position the element relative to its original position; the element will move to where we positioned it, and the size of the original position will be preserved in the carrying block.

Absolute positioning | Absolute positioning

Position relative to the bearer block. The element will be removed from the flow of HTML and then repositioned to give the element the space it deserves based on the bearer block, and the size of the original position will be cleared in the bearer block. The positioning value of its parent element cannot be static.

Fixed positioning|Fixed position positioning

relative to the viewport coordinates of the browser window, the position is fixed and no longer follows the scroll changes due to movement.

Bottom, left, right, top

所属的	设定值
底部框设定下方间距左侧设定框左边间距权设定右边间距箱顶盒设定上方间距	汽车 | < 长度 > | < 百分比 >
预设值：auto  适用于：定位元素 继承性：无

These four attributes are used to set the boundary distance between the positioned target element and the carrying block. It should be noted that these four values ​​can all be set to negative numbers; when they are negative, the position of the element will run outside the boundary of the holding block.

z-index value

所属的	设定值
z-index进行 ?轴定位	汽车 | < 整数 >
预设值：auto  适用于：定位元素 继承性：无

is used to overlap elements on top of each other. The larger the value, the higher the level (negative values ​​can also be used).

Clip

所属的	设定值
剪辑 修剪可视的范围	汽车 | < 形 >
预设值：auto  适用于：绝对定位的元素 继承性：无

The volume within the visible light range is surrounded and trimmed.

RECT RECT (top, right, bottom, left) is cut out starting from the upper left corner of the element .

Illustration Illustrations (top, right, bottom, left) are similar to the rectangle method, but they are cut inward from the element boundary .