About the absolute relative layout of HTML CSS

CSS Positioning properties

Position: Place elements in a static , relative , absolute , or fixed position.

Top: Defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block .

Right: Defines the offset between the left margin boundary of the anchored element and the right boundary of its containing block .

Bottom: Defines the offset between the margin boundary under the anchor element and the lower boundary of its containing block.

Left: Defines the offset between the right margin boundary of the positioned element and the left edge of its containing block .

Overflow: Sets what happens when the content of an element overflows its area.

Clip: Sets the shape of the element. The element is cut into the shape and then displayed.

Vertical-align: Sets the vertical alignment of the element.

Z-index: Sets the stacking order of the elements.

4 properties in position:static|absolute|fixed|relative in CSS layouts

As can be seen from the above syntax, there are a number of methods of positioning, they are static, absolute positioning (absolute), fixed (fixed), relative positioning (relative). In this tutorial, I do not speak, only the most commonly used is the most practical two positioning methods: absolute positioning (absolute), relative positioning (relative).

Absolute positioning (absolute): Drag the object assigned to this targeting method from the document flow and use attributes such as Left,right,top,bottom to absolutely locate the parent object closest to its closest location setting. If the parent of an object does not have an anchor property set, or if it follows an HTML positioning rule, it is positioned as a reference based on the upper-left corner of the body object. Absolute positioning objects can cascade, cascade order can be controlled by the Z-index property, Z-index value is no unit of integers, large at the top, can have negative values (currently negative FF is not supported).

Relative positioning (relative): objects are not stackable and are offset from the normal document stream by attributes such as Left,right,top,bottom. You can also use Z-index layering design.

Static: is the default property and the element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

relative: The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Relative positioning is actually considered part of the normal flow positioning model, because the position of the element is relative to its position in the normal stream.

Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

Absolute: The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow. Try not to use attributes such as left:px.right:px. Try to use Margin-left: how many px; it's not easy to misplace.

fixed: the element box behaves like the position is set to absolute, but its containing block is the window itself. is fixed to death. No matter how your browser scrolls up or down, the specifics of the browser will not change.

Floating is not exactly a positioning, however, it is certainly not a normal flow layout.

Everything is a box

Block boxes and inline elements

Use the Display property to change the type of box generated

This means that by setting the display property to block, inline elements (such as the <a> element) behave like block-level elements. You can also set the display to none so that the generated elements do not have a box at all. In this case, the box and all its contents are no longer displayed and do not occupy space in the document.

However, in one case, block-level elements are created, even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element, such as a Div. Even if the text is not defined as a paragraph, it is treated as a paragraph:

< Div > some text < P > Some more text. </ P > </ Div >

In this case, this box is called the Nameless block box because it is not associated with a specially defined element.

A similar situation can occur with the text line of a block-level element. Suppose you have a paragraph that contains three lines of text. Each line of text forms a nameless box. You cannot apply a style directly to a nameless block or a row box, because there is no place to apply the style (note that the row and inline boxes are two concepts). However, it helps to understand that everything you see on the screen forms some kind of box.

CSS positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

About the absolute relative layout of HTML CSS