The application of CSS in positioning grammar

css| Detailed Explanation | grammar

　　One, CSS positioning: position

　　Grammar:

position:static | Absolute | Fixed | Relative

　　Take value:

Static:  default value. No special location, objects follow HTML positioning rules
Absolute:  Drag objects out of the document stream, using the left, right, top, and bottom attributes to be absolutely positioned relative to their nearest parent object with the most location setting. If no such parent object exists, it is based on the body object. And its cascade is defined by the Z-index property
Fixed:  not supported. Object positioning conforms to an absolute (absolute) approach. But there are some rules to follow.
Relative:  objects cannot be stacked, but will be offset from the normal document flow based on the properties of left, right, top, bottom, etc.

　Description

Retrieves how the object is positioned.

Setting this property value to absolute drags the object away from the normal document flow absolute positioning without regard to the layout of its surrounding content. If other objects with different Z-index properties already occupy the given position, they will not interact with each other, but will cascade in the same place. The object does not have an outer patch (margin), but there are still internal patches (padding) and borders (border).
To activate the absolute (absolute) positioning of an object, you must specify at least one of the left, right, top, bottom properties, and set this property value to absolute. Otherwise, these properties use their default value of auto, which causes the object to conform to the normal HTML layout rules and is rendered immediately after the previous object.

Setting this property value to relative keeps the object in a normal HTML stream, but its position can be offset by its previous object. After a relative (relative) anchored object, the text or object occupies their own space and does not overwrite the natural space of the object being anchored. Unlike this, the text or object after an absolute (absolute) anchored object occupies its natural space before it is dragged away from the normal document stream. Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The relative positioning object is outside the viewable area, and the scroll bar does not appear.

The size of the content determines the size of the object based on the layout. For example, if you set the height and position properties of a Div object, the contents of the Div object determine its width.

This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is position.

　Example:

div {position:relative; top:-3px}

　　Second, CSS positioning: Z-index

　　Grammar:

Z-index:auto | Number

　　Take value:

Auto:  default value. Follow the positioning of its parent object
Number:  integer value without units. Can be a negative number

　　Description

Retrieves or sets the stacking order of objects.
Objects with larger number values are overwritten over objects with smaller number values. If this property of two absolutely anchored objects has the same number value, it will cascade according to the order in which they are declared in the HTML document. For an absolutely anchored object that does not specify this property, an object with a positive number value for this property is above it, and the number with a negative number is below it. This property can be removed by setting the parameter to NULL.

This property only acts on objects that have a position property value of relative or absolute. This property does not work with a window control, such as a select object. In ie5.5+, the IFrame object begins to support this property. In the previous browser version, the IFrame object was a window control and this property was ignored. This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is zindex.

　　Example:

div {position:absolute; z-index:3; width:6px;}

　　Third, CSS positioning: Top

　　Grammar:

Top:auto | Length

　　Take value:

Auto:  default value. No special positioning, allocated in document flow according to HTML positioning rules
Length:  A value consisting of floating-point numbers and unit identifiers | Percentage. You must define a position property value of absolute or relative this value to take effect. See Length Units

　　Description

Retrieves or sets the location related to the top edge of the object with its most recent parent object with a positioning setting.
This property is only available if the object's positioning (position) property is set. Otherwise, this property setting is ignored. This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is top. The value is a string, so it is not available for calculations in script (Scripts). Use the postop of the Style object, Pixeltop, and other features such as the offsettop of the object.

　　Example:

div {position:absolute; top:1in;}
div {position:relative; top:-3px; left:6px;}

　　Four, CSS positioning: Right

　　Grammar:

Right:auto | Length

　　Take value:

Auto:  default value. No special positioning, allocated in document flow according to HTML positioning rules
Length:  A value consisting of floating-point numbers and unit identifiers | Percentage. You must define a position property value of absolute or relative this value to take effect. See Length Units

　　Description

Retrieves or sets the location of the object relative to the right of its most recent parent object with a positioning setting.

This property is only available if the object's positioning (position) property is set. Otherwise, this property setting is ignored. This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is right. The value is a string, so it is not available for calculations in script (Scripts). Use the Posright, Pixelright, and other run-time attributes of the style object.

　　Example:

div {position:absolute; right:1in;}
div {position:relative; top:-3px; right:6px;}

　　Five, CSS positioning: Bottom

　　Grammar:

Bottom:auto | Length

　　Take value:

Auto:  default value. No special positioning, allocated in document flow according to HTML positioning rules

Length:  A value consisting of floating-point numbers and unit identifiers | Percentage. You must define a position property value of absolute or relative this value to take effect. See Length Units

　　Description

Retrieves or sets the location of the object relative to the bottom edge of its most recent parent object with a positioning setting. This property is only available if the object's positioning (position) property is set. Otherwise, this property setting is ignored. This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is bottom. The value is a string, so it is not available for calculations in script (Scripts). Use the Posbottom, Pixelbottom, and other run-time attributes of the style object.

　　Example:

div {position:absolute; bottom:1in;}

div {position:relative; bottom:6px;}

　　Six, CSS positioning: Left

　　Grammar:

Left:auto | Length

　　Take value:

Auto:  default value. No special positioning, allocated in document flow according to HTML positioning rules
Length: A value consisting of floating-point numbers and unit identifiers | Percentage. You must define a position property value of absolute or relative this value to take effect. See Length Units

　　Description

Retrieves or sets the location of the object relative to the left of its most recent parent object with a positioning setting.

This property is only available if the object's positioning (position) property is set. Otherwise, this property setting is ignored. This property is read-only for Currentstyle objects. is writable for other objects. The corresponding script attribute is left. The value is a string, so it is not available for calculations in script (Scripts). Use the posleft of the Style object, Pixelleft, and other features such as the offsetleft of the object.

　　Example:

div {position:absolute; left:1in;}
div {position:relative; top:-3px; left:6px;}