Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what is the positioning grammar in CSS". In the daily operation, I believe that many people have doubts about what the positioning grammar in CSS is. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what is the positioning grammar in CSS?" Next, please follow the editor to study!

1. CSS positioning: position

◆ syntax:

Position:static | absolute | fixed | relative

Value of ◆:

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

Absolute: drag an object from the document stream and use attributes such as left,right,top,bottom to position it absolutely relative to its nearest parent object with the most positioning settings. If such a parent object does not exist, it depends on the body object. The cascading is defined by the z-index attribute.

Fixed: not supported. Object positioning follows the absolute (absolute) mode. But you have to follow some rules.

Relative: objects are not cascading, but will be offset in the normal document stream based on attributes such as left,right,top,bottom.

◆ description: how to retrieve the location of the object.

Setting this property to absolute will drag the object away from the normal document stream absolute positioning, regardless of the layout of the content around it. If other objects with different z-index properties already occupy a given location, they will not influence each other, but will be cascading in the same location. At this point, the object does not have an external 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 the value of this property to absolute. Otherwise, the above properties will use their default value of auto, which will cause the object to follow the normal HTML layout rules and be rendered immediately after the previous object.

Setting this property to relative keeps the object in the normal HTML stream, but its position can be offset based on its previous object. Text or objects that relative objects occupy their own space without overwriting the natural space of the anchored object. In contrast, text or objects that absolute an object will occupy its natural space before it is dragged away from the normal document stream. Placing absolute (absolute) anchored objects outside the visual area causes scroll bars to appear. The relative anchor object is outside the visual area, and the scroll bar does not appear.

The size of the content determines 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 determines its width (width).

This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is position.

◆ example:

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

2. CSS positioning: Z-index

◆ syntax:

Z-index:auto | number

Value of ◆:

Auto: default value. Obey the positioning of its parent object

Number: an integer value without a unit. Can be a negative number

◆ description:

Retrieves or sets the cascading order of objects.

Objects with higher number values are overwritten over objects with lower number values. If this property of two absolutely anchored objects has the same number value, it will be cascaded according to the order in which they are declared in the HTML document. For absolute positioning objects that do not specify this property, objects with a positive number for this property are above it, and objects with a negative number are below it. Set the parameter to null to remove this property.

This property works only on objects whose position attribute value is relative or absolute. This property does not act on window controls, such as select objects. In IE5.5+, the iframe object begins to support this property. In previous browser versions, the iframe object was a window control and this property was ignored. This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is zIndex.

◆ example:

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

3. CSS positioning: top

◆ syntax:

Top:auto | length

Value of ◆:

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

Length: length value consisting of floating-point numbers and unit identifiers | percentage. The value of the position attribute must be defined as absolute or relative for this value to take effect.

◆ description:

Retrieves or sets the position of the object related to the top edge of its nearest parent object with positioning settings.

This property is available only when the object's position property is set. Otherwise, this property setting is ignored. This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is top. Its value is a string, so it cannot be used for calculations in scripts (Scripts). Use runtime properties such as the posTop,pixelTop of the style object, and properties such as the offsetTop of the object.

◆ example:

The following is a reference clip:

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

4. CSS positioning: right

◆ syntax:

Right:auto | length

Value of ◆:

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

Length: length value consisting of floating-point numbers and unit identifiers | percentage. The value of the position attribute must be defined as absolute or relative for this value to take effect.

◆ description:

Retrieves or sets the location of the object to the right of its nearest parent object with positioning settings.

This property is available only when the object's position property is set. Otherwise, this property setting is ignored. This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is right. Its value is a string, so it cannot be used for calculations in scripts (Scripts). Use run-time properties such as posRight,pixelRight of the style object.

◆ example:

The following is a reference clip:

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

5. CSS positioning: bottom

◆ syntax:

Bottom:auto | length

Value of ◆:

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

Length: length value consisting of floating-point numbers and unit identifiers | percentage. The value of the position attribute must be defined as absolute or relative for this value to take effect.

◆ description:

Retrieves or sets the position of the object related to the bottom edge of its nearest parent object with positioning settings. This property is available only when the object's position property is set. Otherwise, this property setting is ignored. This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is bottom. Its value is a string, so it cannot be used for calculations in scripts (Scripts). Use run-time properties such as posBottom,pixelBottom of the style object.

◆ example:

The following is a reference clip:

Div {position:absolute;bottom:1in;} div {position:relative;bottom:6px;}

6. CSS positioning: left

◆ syntax:

Left:auto | length

Value of ◆:

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

Length: length value consisting of floating-point numbers and unit identifiers | percentage. The value of the position attribute must be defined as absolute or relative for this value to take effect.

◆ description:

Retrieves or sets the position to the left of the object to the left of its nearest parent object with positioning settings.

This property is available only when the object's position property is set. Otherwise, this property setting is ignored. This property is read-only to the currentStyle object. It is readable and writable to other objects. The corresponding script feature is left. Its value is a string, so it cannot be used for calculations in scripts (Scripts). Use runtime properties such as the posLeft,pixelLeft of the style object, and properties such as the offsetLeft of the object.

◆ example:

The following is a reference clip:

Div {position:absolute;left:1in;} div {position:relative;top:-3px;left:6px;} at this point, the study of "what is the location grammar in CSS" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.