How to use the CSS Position property

This article mainly introduces "how to use CSS Position attributes". In daily operation, I believe many people have doubts about how to use CSS Position attributes. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "how to use CSS Position attributes". Next, please follow the editor to study!

The CSSPosition (positioning) position attribute specifies the positioning type of the element. The five values of the position attribute: the top, bottom, left, and right attributes that the staticrelativefixedabsolutesticky element can use.

Position property browser support

IE Firefox Chrome Safari Opera

All major browsers support the position attribute.

Note: no version of InternetExplorer (including IE8) supports the attribute value "inherit".

Definition and usage of position attribute

The position attribute specifies the positioning type of the element.

Description

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be located, but an absolute or fixed element generates a block-level box, regardless of the type of the element itself. The relative positioning element is offset from its default position in the normal flow.

Default value: static

Inheritance: no

Version: CSS2

JavaScript syntax: object.style.position= "absolute"

Possible value

Value description

Absolute

The element that generates absolute positioning is positioned relative to the first parent element other than static positioning.

The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Fixed

Generates an absolutely positioned element, positioned relative to the browser window.

The location of the element is specified by the "left", "top", "right", and "bottom" attributes.

Relative

The relative positioning element is generated and positioned relative to its normal position.

Therefore, "left:20" adds 20 pixels to the LEFT position of the element.

Static default value. Without positioning, the element appears in the normal flow (ignoring the top,bottom,left,right or z-index declaration).

Inherit states that the value of the position attribute should be inherited from the parent element.

TIY instance

Positioning: relative positioning

This example demonstrates how to position an element relative to its normal position.

Positioning: absolute positioning

This example demonstrates how to use absolute values to position elements.

Positioning: fixed positioning

This example shows how to position an element relative to a browser window.

Set the shape of the element

This example shows how to shape an element. This element is clipped into this shape and displayed.

Z-index

Z-index can be used to place one element after another.

Z-index

The element in the above example has changed the Z-index.

At this point, the study on "how to use the CSS Position attribute" is over. I hope to be able to 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!