The application of CSS in the localization grammar

Source: Internet
Author: User
First, CSS positioning: position

Grammar:

position:static | Absolute | Fixed | Relative

Value:

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

Absolute: Drag objects from the document stream, using left, right, top, bottom, and other properties to be absolutely positioned relative to the closest one of its most positioned parent. If no such parent object exists, then the body object is based. And its cascade is defined by the Z-index property.

Fixed: not supported. Object positioning is in absolute (absolute) mode. But there are some rules to follow.

Relative: objects are not stackable, but will be offset from the normal document flow based on properties such as left, right, top, bottom, and so on.

Description: Retrieves how objects are positioned.

Setting this property value to absolute will drag the object out of the normal document flow to absolute positioning without regard to the layout of the content around it. If other objects with different Z-index properties already occupy a given position, they will not interact with each other and will cascade at the same location. The object does not have an outer patch (margin), but it still has an inner patch (padding) and border (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, the above properties will use their default auto, which will cause the object to follow normal HTML layout rules and be presented 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. Text or objects after the relative (relative) anchor object occupy their own space without overwriting the natural space of the object being anchored. Unlike this, text or an object after an absolute (absolute) anchored object occupies its natural space before the anchored object is dragged off the normal document stream. Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The scroll bar does not appear when you place a relative (relative) anchored object outside the viewable area.

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 content of the Div object determines its width.

This property is read-only for Currentstyle objects. Readable and 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

Value:

Auto: Default value. Follow the positioning of its parent object
Number: An integer value with no units. Can be a negative number

Description

Retrieves or sets the stacking order of objects.

Objects of a larger number value are overwritten by objects with smaller number values. If this property of two absolute 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 absolute anchored object that does not specify this property, the object with a positive number for this property is above it, and the object with a negative number is below it. Set the parameter to NULL to remove this property.

This property only works on objects where the Position property value is relative or absolute. This property is not used for window controls, such as select objects. In ie5.5+, the IFrame object begins to support this property. In previous versions of the browser, the IFrame object is a window control that ignores this property. This property is read-only for Currentstyle objects. Readable and 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

Value:

Auto: Default value. No special positioning is assigned 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 the Position property value to absolute or relative this value before it can take effect.

Description

Retrieves or sets 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 positioning (position) property is set. Otherwise, this property setting is ignored. This property is read-only for Currentstyle objects. Readable and writable for other objects. The corresponding script attribute is top. The value is a string, so it is not available for calculations in scripts (Scripts). Use the postop of the Style object, the run-time attributes such as Pixeltop, and the offsettop of the object.

Example:

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


Four, CSS positioning: Right

Grammar:

Right:auto | Length

Value:

Auto: Default value. No special positioning is assigned 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 the Position property value to absolute or relative this value before it can take effect.

Description

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

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

Example:

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


Five, CSS positioning: Bottom

Grammar:

Bottom:auto | Length

Value:

Auto: Default value. No special positioning is assigned 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 the Position property value to absolute or relative this value before it can take effect.

Description

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

Example:

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


Vi. CSS Positioning: Left

Grammar:

Left:auto | Length

Value:

Auto: Default value. No special positioning is assigned 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 the Position property value to absolute or relative this value before it can take effect.

Description

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

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

Example:

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

The above is a detailed description of CSS positioning grammar application content, more relevant articles please pay attention to topic.alibabacloud.com (www.php.cn)!

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.