Detailed explanation of CSS positioning syntax application

1. CSS positioning: position

Syntax:

Position: static | absolute | fixed | relative

Value:

static: Default value. There is no special positioning, the object follows HTML positioning rules.

　Absolute: Drag the object out of the document flow and use left, right, top, bottom and other attributes to perform absolute positioning relative to its closest parent object with the most positioning settings. If no such parent object exists, the body object is used. And its cascade is defined through the z-index attribute.

　 fixed : Not supported. Object positioning follows the absolute method. But there are some norms to follow.

　relative: The object cannot be stacked, but will be offset in the normal document flow based on left, right, top, bottom and other properties.

　Description: Retrieve the positioning method of the object.

Setting this property value to absolute will drag the object out of the normal document flow and position it absolutely regardless of the layout of its surrounding content. If other objects with different z-index properties already occupy a given position, they will not affect each other and will overlap at the same position. At this time, the object does not have an outer patch (margin), but it still has an inner patch (padding) and a border (border).

To activate the absolute positioning of an object, you must specify at least one of the left, right, top, and bottom properties, and set the value of this property to absolute. Otherwise the above properties will use their default value of auto , which will cause the object to obey normal HTML layout rules and be rendered immediately after the previous object.

Setting this property value to relative will keep the object in the normal HTML flow, but its position can be offset based on its previous object. Text or objects following a relatively positioned object occupy their own space without overwriting the natural space of the positioned object. In contrast, text or objects following an absolutely positioned object occupy its natural space until the positioned object is dragged out of the normal document flow. Placing absolutely positioned objects outside the visible area will cause scroll bars to appear. However, if a relatively positioned object is placed outside the visible area, the scroll bar will not appear.

　The size of the content will determine the size of the object according to the layout. For example, if you set the height and position properties of a div object, the content of the div object will determine its width.

　This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script property is position .

　Example:

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

　 2. CSS positioning: Z-index

　 Syntax:

　 z-index: auto | number

　 Value:

　 auto : default value. Follow the positioning of its parent object
　number : A unitless integer value. Can be a negative number

　 Description:

　 Retrieve or set the stacking order of objects.

　 Objects with a larger number value will be overlaid on objects with a smaller number value. If two absolutely positioned objects have the same number value for this attribute, they will be stacked according to the order in which they are declared in the HTML document. For absolutely positioned objects where this property is not specified, objects with a positive number value for this property will be above it, and objects with a negative number value will be below it. Setting the parameter to null removes this property.

　This property only works on objects whose position property value is relative or absolute. This property does not affect window controls such as select objects. In IE5.5+, iframe objects begin to support this attribute. In previous browser versions, iframe objects were window controls and this property was ignored. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script property is zIndex .

　Example:

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

　 3. CSS positioning: top

　 Syntax:

　top : auto | length

　 Value:

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

　length : A length value consisting of a floating point number and a unit identifier | Percent. The position attribute value must be defined as absolute or relative for this value to take effect.

　Description:

　Retrieve or set the position of the object relative to the top edge of its most recent parent object with positioning settings.

　This property is only available when the object’s position property is set. Otherwise, this property setting is ignored. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script attribute is top . Its value is a string, so it cannot be used for calculations in scripts. Please use the runtime properties such as posTop and pixelTop of the style object, and the offsetTop and other properties of the object.

　Example:

The following is a quote fragment:
　div { position: absolute; top: 1in; }
　div { position:relative; top:-3px; left:6px; }

IV. CSS positioning: right

Grammar:

　right: auto | length

　Value:

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

　length : A length value consisting of a floating point number and a unit identifier | Percent. The position attribute value must be defined as absolute or relative for this value to take effect.

　Description:

　Retrieves or sets the position of an object relative to the right of its most recent parent object with positioning settings.

　This property is only available when the object’s position property is set. Otherwise, this property setting is ignored. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script attribute is right . Its value is a string, so it cannot be used for calculations in scripts. Please use the runtime properties such as posRight and pixelRight of the style object.

　Example:

The following is a quote fragment:
　div { position: absolute; right: 1in; }
　div { position:relative; top:-3px; right:6px; }

5. CSS positioning: bottom

　Syntax:

　bottom: auto | length

　Value:

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

　length: A length value consisting of a floating point number and a unit identifier | Percent. The position attribute value must be defined as absolute or relative for this value to take effect.

　Description:

　Retrieve or set the position of the object relative to the bottom edge of its most recent parent object with positioning settings. This property is only available if the object's position property is set. Otherwise, this property setting is ignored. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script property is bottom . Its value is a string, so it cannot be used for calculations in scripts. Please use the runtime properties such as posBottom and pixelBottom of the style object.

　Example:

The following is a quote fragment:
　div { position: absolute; bottom: 1in; }
　div { position:relative; bottom:6px; }

　6. CSS positioning: left

　 Syntax:

left: auto | length

　Value:

　auto: Default value. No special positioning, allocated in the document flow according to HTML positioning rules.

　length : A length value consisting of a floating point number and a unit identifier | Percent. The position attribute value must be defined as absolute or relative for this value to take effect.

　Description:

　Retrieves or sets the position of an object relative to the left of its most recent parent object with positioning settings.

　This property is only available when the object’s position property is set. Otherwise, this property setting is ignored. This property is read-only for the currentStyle object. For other objects can be read and written. The corresponding script attribute is left . Its value is a string, so it cannot be used for calculations in scripts. Please use the runtime properties such as posLeft and pixelLeft of the style object, and the offsetLeft and other properties of the object.

　Example:

The following is a quote fragment:
　div { position: absolute; left: 1in; }
　div { position:relative; top:-3px; left:6px; }

The above is a detailed explanation of the positioning syntax application of CSS For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!