Introduction to the position attribute value in HTML

This article introduces to you the content of the article about the position attribute value in HTML. It has a good reference value. I hope it can help friends in need.

Theoretically, there are 8 values ​​for all positions

Including: position: static | relative | absolute | fixed | sticky | initial | inherit | unset

The most commonly used ones are static, relative, absolute, fixed and sticky

initial, inherit and unset are css Keywords, any css attribute value can be set to these values

position: static

Default value, in normal flow, the set top, left, right, bottom, z-index should be ignored

position: relative

Relative positioning, Offset relative to its original position, (Example: top: 10px; // After moving, the top of the element is located 10px below the top of the original position;)

Detach from the document flow, but retain the space at the original position in the document flow (Reserved space),

That is to say , the original position of the element will always remain a blank space, and the adjacent sibling elements will maintain their original position and will not change with the movement of the element

Note: position: relative to table-* -The group, table-row, table-column, table-cell, table-caption elements are invalid.

Chestnut:

##position: absolute

Absolute positioning, if the ancestor element has an attribute value other than position: static, then

Absolute positioning is relative to the ancestor element; otherwise, Absolute positioning is relative to the browser viewport

(One thing to note here is that most people think that it is absolutely positioned relative to the html or body element. This is a misunderstanding; when the page is scrollable, it can be seen that it is absolutely positioned relative to the browser window. Instead of the entire html content; I am too lazy to write examples here, so I will just learn from others:

CSS Advanced - How to define the width and height of absolutely positioned elements)

Therefore, the general approach is to add the position: relative

attribute to the parent element of the absolutely positioned element

out of the document flow without reserving space. Move the position of sibling elements up

Chestnut:

But position: absolute does not only have the above purpose;

is based on its content size For resized elements (for example, height and width are set to auto, or inline elements), if the element is absolutely positioned position: absulute, you can

specify top / bottom / left / right, leaving height unspecified (i.e. auto), to fill the available vertical (horizontal) space

What does it mean? Calm down, let’s eat some chestnuts:

(In addition,

absolutely positioned elements can be set with margins , and will not be merged with other margins, this will not Give me an example)

When I wrote the above example, I still had a

question:

Since absolute positioning is detached The document is flowing. Why is the origin of an inline element located at its original position when the left value is not set when it is absolutely positioned? Instead of being at the origin of the parent element?

(I haven’t found the reason for a long time, I’ll leave this for later)

position: fixed

Fixed positioning,

Fixed positioning relative to the browser window, not scrolling with the scroll bar, the sample implemented is the advertising pop-up window in daily web pages

out of the document The stream, fixed attribute creates a new cascading context.

Note: When the transform attribute of the ancestor element of the fixed element is not none, the container is changed from the browser window to the ancestor element

position: sticky

Sticky positioning is equivalent to a mixture of relative positioning and fixed positioning. Sticky positioning is determined based on a threshold. When it is greater than or equal to the threshold, relative positioning is used, and when it is less than the threshold, it is fixed positioning.

This threshold is one of top, right, bottom, and left. One of them must be set for sticky positioning to take effect, otherwise it will always appear as relative positioning.

In addition to the above conditions, there are several points that need to be paid attention to, otherwise sticky positioning will be invalid:

1. The parent element The content needs to be scrolled and cannot have overflow: hidden or overflow: auto attributes

2. The height of the parent element cannot be lower than the height of the sticky positioning element

3. Sticky is container-related and will only take effect in the container (parent element) in which it is located.

sticky Chestnut:demo

Sticky positioningCompatibilityQuestions:

1. Need to write The next two css statements:

position: sticky; and position: -webkit-sticky; /* Safari */

2. Internet Explorer, Edge 15 and above Earlier IE versions did not support sticky positioning.

position: initial

The initial keyword is used to set the CSS property to its default value (in this case, position: static)

Note: IE does not support this keyword

position: inherit

Every The overview of each CSS property definition indicates whether the property is inherited by default ("Inherited: Yes") or not inherited by default ("Inherited: no").

You can read about the wonderful use of inherit here: Talk about some interesting CSS topics (4) – Starting with reflection, talk about CSS inheritance

position: unset

The unset keyword is a combination of initial and inherit:

1. If the attribute is If the attribute is inherited by default, the value is equal to inherit

2. If the attribute is a non-inherited attribute, the value is equal to initial

Related recommendations:

Summary of different table attributes of HTML (with code)

HTML imitation of Baidu homepage

The above is the detailed content of Introduction to the position attribute value in HTML. For more information, please follow other related articles on the PHP Chinese website!