The application of CSS in positioning grammar

One, CSS positioning: position

Grammar:

position:static | Absolute | Fixed | Relative

Take value:

Static: Default value. No special positioning, the object follows the HTML positioning rules.

Absolute: Drag objects out of the document stream, using the left, right, top, bottom, and other attributes to absolutely position them relative to their closest parent object. If no such parent object exists, it is based on the body object. And the 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 in the normal document stream based on the properties of left, right, top, bottom, and so on.

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: An 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 the document flow according to the 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.

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:

Four, CSS positioning: Right

Grammar:

Right:auto | Length

Take value:

Auto: Default value. No special positioning, allocated in the document flow according to the 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.

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:

Five, CSS positioning: Bottom

Grammar:

Bottom:auto | Length

Take value:

Auto: Default value. No special positioning, allocated in the document flow according to the 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.

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:

Six, CSS positioning: Left

Grammar:

Left:auto | Length

Take value:

Auto: Default value. No special positioning, allocated in the document flow according to the 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.

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:

Note : More wonderful articles please pay attention to the triple web Design tutorial section.