What values ​​does position contain?

Position includes static, relative, absolute, fixed, sticky, etc. Detailed introduction: 1. static, the element is positioned normally in the document flow and is not affected by other positioning attributes; 2. relative, the element is positioned relative to its normal position, and the position of the element is adjusted by setting the top, right, bottom and left attributes. , relative positioning will not affect the position of other elements; 3. absolute, the element is relative to its nearest one, etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

In programming, "position" is an attribute used to position elements. It can be used in HTML, CSS and JavaScript to control the position of elements on the page.

In HTML, the "position" attribute has the following values:

1. static (default value): The element is positioned normally in the document flow and is not affected by other positioning attributes.

2. Relative: The element is positioned relative to its normal position, and the position of the element is adjusted by setting the top, right, bottom and left attributes. Relative positioning does not affect the position of other elements.

3. Absolute: The element is positioned relative to its nearest positioned ancestor element. If there is no positioned ancestor element, it is positioned relative to the body element of the document. Adjust the position of elements by setting the top, right, bottom, and left attributes. Absolute positioning affects the position of other elements.

4. fixed: The element is positioned relative to the browser window. Even if the page is scrolled, the position of the element will not change. Adjust the position of elements by setting the top, right, bottom, and left attributes. Fixed positioning affects the position of other elements.

In CSS, the value of the "position" attribute is the same as in HTML, but there is an additional value:

5. sticky: the element behaves as relative positioning and fixed positioning when scrolling the mix of. When the element is visible in the container, it behaves like relative positioning, and when the element scrolls out of the container, it behaves like fixed positioning. Adjust the position of elements by setting the top, right, bottom, and left attributes.

In JavaScript, the value of the "position" attribute is the same as in CSS. JavaScript can be used to dynamically change the positioning attribute value of an element to achieve dynamic positioning and layout of the element.

To summarize, the values ​​of the "position" attribute are static, relative, absolute, fixed and sticky. These values ​​can be used to control the position of elements on the page to achieve flexible layout effects.

The above is the detailed content of What values ​​does position contain?. For more information, please follow other related articles on the PHP Chinese website!