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

This article mainly talks about "what are the attributes of position in html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the attributes of position in html"?

Introduction to css style position attribute in html (new sticky)

Position means location type. The value types can be: static, relative, absolute, fixed, inherit and sticky, where sticky is a newly released attribute of CSS3.

1 、 position: static

Static (no positioning) is the default value for position, the element is in a normal document stream, and the left, top, right, bottom, and z-index attributes are ignored.

2 、 position: relative

Relative (relative positioning) refers to setting the position of the element relative to its original position, the element is not separated from the document stream, so the original position of the element will be retained, and the position of other elements will not be affected.

3 、 position: absolute

Absolute (absolute positioning) refers to setting absolute positioning for elements. Objects that are relatively positioned can be divided into two situations:

1) an element with absolute set if there is an ancestor element whose position attribute is set to relative or absolute, then the positioning object of the element is an ancestor element for which the position attribute has been set.

2) if there is no ancestor element with the position attribute set, it is positioned relative to the body at this time.

4 、 position: fixed

To put it simply, fixed is a special version of the absolute,fixed element, which is always positioned relative to body.

5 、 inherit

Inherits the position attribute of the parent element, but note that the inherit attribute is not supported by IE8 and previous versions.

Before you talk about sticky, put in the code:

Html:

Relative static1 relative1 static1 Absolute static2 absolute2 static2 Relative contains Absolute static3 absolute3 static3 Absolute contains Absolute static3 absolute3 static3

The positioning attribute of the specific div can be seen in the text in the block. The display effect is as follows, which is consistent with the above:

6 、 sticky

The most interesting thing in the position attribute is sticky. If you set the sticky element, the position of the element will not be affected by the positioning in the screen range (viewport) (the setting is top, left and other attributes are invalid). When the position of the element is about to be moved out of the offset range, the positioning will become fixed, which will result in a fixed position according to the set left, top and other attributes.

You can see that the sticky attribute has the following characteristics:

This element does not deviate from the document flow and still retains its original position in the document flow.

When the element is scrolled in the container beyond the specified offset value, the element is fixed at the specified position within the container. That is, if you set top: 50px, it is fixed when the sticky element reaches the position of the 50px at the top of the element that is relatively positioned, and no longer moves up.

The fixed relative offset of an element is relative to the nearest ancestor element with a scroll box. If none of the ancestral elements can be scrolled, the offset of the element is calculated relative to viewport.

At this point, I believe you have a deeper understanding of "what are the attributes of position in html?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.