CSS3 Positioning | Position Research

Viewport (viewport)

When a viewer views a Web page file, the user Agents, UA, and browser are usually provided to the viewer for a viewport (window or other viewable area in the screen). When we resize the viewport, the UA is likely to change the layout on the file.

When the viewport is smaller than the canvas area that the file renders, the UA may provide a reel mechanism to give you a glimpse of the file. In theory, each canvas can have up to one viewport at most, but UA can produce more than one canvas (for example, a different viewable area on the same file, such as a frame grid).

Hosting chunks (containing blocks)

If some of the box's position and size are calculated on the edge (edges) of other related "moment-row blocks", we will call this "moment-line block" the bearer block (containing Blocks). Simply put, the so-called bearer block refers to the "element" of the most recent block-level parental elements, regardless of the "element" positioning or floating, are based on its bearer block to do reference (except fixed positioning mode).

Underneath is a simple bearer block (Demo-two's hosting block is Demo-one).

• When the parental element is a block-type element, the size of its bearer chunk is the distance to the inner edge.
• When the parental element is a single-column element, the size of its hosted chunk is to the content edge.

Normal flow (normal)

What is normal flow? From the top down, from left to right is the so-called normal flow; we take the Hypertext Markup language to be good, the original code is written in the direction from the top down from left to right, this is the normal flow. and the browser is based on such a trend to interpret (literal translation) of our original code.

In other words, in most cases, normal flow refers to the way in which the element labels are displayed in the Web page. In addition, most HTML element tags belong to the inline box or blockbox. The Block box can contain an inline box, whereas the inline box cannot contain blockbox.

Position

Belongs to the	Set Value
Position Positioning	static | Relative | Absolute | Center | Page | fixed
Default 2006/02/15: Static Applies to: All elements except table column groups and table columns Inheritance: None

Used to position the box created by the HTML element where we want it to be rendered.

Static positioning | Positioning of static position

Located in the order in which the original code was written. In the vernacular, we write the box of the HTML element so that it naturally flows where it is supposed to be. The value of static does not have to be specified specifically because it is a preset value, which means that all the box elements begin in their rightful place. The four properties of bottom, left, right and top are not applicable.

Relative positioning | Positioning of relative position

Relative to the original position (not relative to the position of the other element). Position the element in the relative?? In the original position, the element is moved to where we are positioned, and the size of the original position is preserved in the hosting block.

Absolute Positioning | Positioning of absolute position

Relative to the location where the chunk is hosted. The element is removed from the flow of HTML and then relocated to the space that the element should be based on the hosting chunk, and the size of the original location is cleared in the hosting block. The positioning value of its parental element cannot be static.

Fixed positioning | Positioning of fixed position

As opposed to the viewport coordinates of the browser window, pinning the position will no longer change with the scroll's movement.

Bottom, left, right, top

Belongs to the	Set Value
Bottom box set the left margin of the right side of the spacing set box to the left of the spacing box to set the top box spacing	Automotive | < length > | < percent >
Preset value: Auto Applies To: Anchor element Inheritance: None

These four properties are used to set the boundary distance between the target element and the hosted chunk. Note that these four values can be set to negative numbers, and when negative, the position of the element runs outside the bounds of the bearer block.

Z-index value

Belongs to the	Set Value
Z-index to Axis positioning	Automotive | < integers >
Preset value: Auto Applies To: Anchor element Inheritance: None

Used to stack elements across each other. the larger the value, the higher the upper level (negative values can also be used).

Clip

Belongs to the	Set Value
Clip Trimming the viewable range	Automotive | < shape >
Preset value: Auto Applies to: Absolutely positioned elements Inheritance: None

The volume within the visible range is enclosed within the shear to repair.

<shape>

• RECT RECT（上，右，下，左） Cut out from the upper left corner of the element.
• Illustrations 插图（上，右，下，左） It is similar to a rectangular way, but it is cut from the element boundary inward.

CSS3 Positioning | Position Research