CSS3 positioning | Position research, css3position

CSS3 positioning | Position research, css3position
View area (view area)

When a viewer views a webpage file, the User agent (UA) usually provides the viewer with a view area (window or other visible area ). When we adjust the area size, UA may change the file layout.

When the view area is less than the Canvas area presented by the file, UA may provide a scroll mechanism to give you a glimpse of the entire file. Theoretically, each Canvas can have only one view area, but UA can generate more than one Canvas (for example, different visible areas are provided on the same file, such as frame cells ).

Bearer block (including block)

If the positions and sizes of some boxes are calculated based on edges of other related "moments, we will call this "moment box" as the bearing block (Containing Blocks ). To put it simply, the so-called bearer block refers to the block-level parent-Generation Element closest to the "this element". Whether the positioning or floating of the "this element" is based on itBearer BlockReference (except for the fixed Positioning method ).

Below is a simple bearer block (demo-two's bearer block is demo-one ).

• When the parent element is a block element, its bearing block size is the distance from the inner edge.
• When the parent element is a single-column element, its carrying block size is to the content edge.

Normal Flow (normal traffic)

What is normal flow? From top to bottom, from left to right is the so-called normal flow direction. We can use the hyperfile markup language, the source code is written from top to bottom from left to right, which is the normal flow. The browser also interprets our original code based on this trend.

In other words, in most cases,Normal Flow refers to the way in which element labels are displayed on the webpage.In addition, most HTML element tags belong to inline box or blockbox. The block box can contain the inline box. Conversely, the inline box cannot contain the blockbox.

Location

Of	Set Value
Location Positioning	Static | relative | absolute | center | PAGE | fixed
Preset: static Applicable to: All elements except table column group and table column Inheritance: None

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

Static location | static location

Locate the source code in the order it was written. In vernacular, we write the box generated by the HTML element in sequence so that it can naturally be placed in the original direction.StaticThis value does not need to be specified, because it is a preset value, that is, all the box elements are connected to the original position at the beginning. The attributes bottom, left, right, and top are not applicable.

Relative positioning | relative positioning

Relative to the original position (not relative to other elements ). Position the element relative to the original position. The element is moved to the position where it is located, and the size of the original position is retained in the bearer block.

Absolute positioning | absolute positioning

Relative to the location of the bearer block. The element is removed from the HTML flow direction, and then located to the expected space of the element based on the bearer block. The size of the original location is cleared in the bearer block. The positioning value of the parent element cannot beStatic.

Fixed positioning | fixed position Positioning

Compared withView AreaCoordinates. The positions are fixed and no longer changed as the scroll moves.

Bottom, left, right, top

Of	Set Value
The bottom box sets the spacing below. The left side of the box sets the spacing right side. The top box sets the spacing above.	Car | <length >|< percentage>
Default Value: auto Applicable to: positioning Elements Inheritance: None

These four attributes are used to set the boundary distance between the target element and the bearer block. It must be noted that these four values can be set as negative values. When the value is negative, the position of the element will be outside the boundary of the bearer block.

Z-index value

Of	Set Value
Z-index Axis positioning	Car | <integer>
Default Value: auto Applicable to: positioning Elements Inheritance: None

Used to stack and overwrite elements. The larger the value, the higher the upper layer (negative values can also be used ).

Clip

Of	Set Value
Editing Visible trim range	Car | <shape>
Default Value: auto Applicable to: absolute positioning Elements Inheritance: None

The volume within the visible range is enclosed in the shear.

<Shape>

• RECTRECT (top, right, bottom, left)From ElementUpper left cornerStart to cut out.
• Illustration Illustration (top, right, bottom, left)It is similar to a rectangle, but it is from the Element BoundaryCut out to the inner.