Shulou(Shulou.com)06/02 Report--

This article "What does positioning mean in css" Most people don't understand it except for program members. In order to make everyone understand more "What does positioning mean in css", today's small editor summarizes the following contents for everyone, which have certain reference value. The detailed steps of the contents are clear and the details are properly handled. I hope everyone will gain something through this article. Let's take a look at the specific contents together.

In CSS, positioning means specifying the position of an element on the page, usually set using the position attribute. Css has five positioning methods: 1. static positioning;2. absolute positioning;3. relative positioning;4. fixed positioning;5. viscous positioning.

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

In CSS, positioning means specifying the position of an element on the page, usually set using the position attribute.

CSS has five positioning methods, that is, the position attribute mainly has five values.

static positioning

Absolute positioning (absolute)

Relative positioning (relative)

Fixed (fixed)

sticky positioning

Here are the five values in turn. The last sticky is only supported by browsers in 2017, and this article will focus on it.

static attribute value

static is the default value for the position attribute. If the position attribute is omitted, the browser considers the element to be static.

In this case, the browser determines the position of each element in the order of the source code, which is called "normal page flow." Each block-level element occupies its own block, and there is no overlap between elements. This position is the default position of elements.

Note that the element position caused by static positioning is determined by the browser itself, so the top, bottom, left, and right attributes are invalid.

relative，absolute，fixed

Relative, absolute, fixed These three attribute values have one thing in common, are relative to a certain base point positioning, the only difference is that the base point is different. Therefore, as long as you understand what their base points are, it is easy to grasp these three attribute values.

None of these three positions affect the position of other elements, so there may be overlap between elements.

relative attribute value

Relative indicates an offset from the default position (that is, the position when static), i.e., the anchor point is the default position of the element.

It must be used with the top, bottom, left, and right attributes to specify the direction and distance of the offset.

div { position: relative; top: 20px;}

In the code above, the div element is offset 20px downward from its default position (that is, 20px from the top).

absolute attribute value

Absolute indicates an offset relative to the parent element (usually the parent element), i.e. the anchor point is the parent element.

It has one important restriction: the anchor point (usually the parent element) cannot be static, otherwise it becomes the root element html of the entire page. In addition, absolute positioning must also be used with the top, bottom, left, and right attributes.

/* HTML code is as follows */#father { positon: relative;}#son { position: absolute; top: 20px;}

In the above code, the parent element is relative positioning and the child element is absolute positioning, so the positioning base point of the child element is the parent element, offset 20px downward from the top of the parent element. If the parent element is static, the child element in the example above is offset 20px downward from the top of the page.

Note that elements positioned absolutely are ignored by "normal page flow," i.e., in "normal page flow," the element occupies zero space and surrounding elements are not affected.

fixed attribute value

Fixed means offset relative to the viewport (browser window), i.e. the anchor point is the browser window. This causes the element's position to not change as the page scrolls, as if it were fixed to the page.

If it is used with the top, bottom, left, and right attributes, it indicates that the initial position of the element is calculated based on the viewport, otherwise the initial position is the default position of the element.

div { position: fixed; top: 0;}

In the above code, the div element is always at the top of the viewport and does not change as the page scrolls.

sticky attribute value

Sticky differs from the previous four attributes in that it produces a dynamic effect, much like a combination of relative and fixed: some times it is a relative anchor (the anchor base is its default position), and other times it automatically becomes a fixed anchor (the anchor base is the viewport).

Therefore, it can form the effect of "dynamic fixation." For example, the search toolbar of a web page is initially loaded in its default position (relative positioning).

As the page scrolls down, the toolbar becomes fixed and stays fixed at the top of the page.

When the page scrolls back up, the toolbar returns to its default position.

The premise that sticky takes effect is that it must be used together with the four attributes top, bottom, left and right. It cannot be omitted, otherwise it is equivalent to relative positioning and does not produce the effect of "dynamic fixation." The reason is that these four attributes define the "offset distance," which browsers treat as a sticky threshold.

The rule is that when the page scrolls and the parent element starts to move out of the viewport (i.e., partially invisible), relative positioning automatically switches to fixed positioning as long as the distance from the sticky element reaches the effective threshold; fixed positioning automatically switches back to relative positioning when the parent element completely moves out of the viewport (i.e., completely invisible).

See the sample code below. (Note that all browsers, except the deprecated IE, currently support sticky.) Safari, however, requires the browser prefix-webkit-.)

#toolbar { position: -webkit-sticky; /* safari browser */ position: sticky; /* other browsers */ top: 20px;}

In the above code, as the page scrolls down, the parent element of the #toolbar starts to move away from the viewport, and as soon as the top of the viewport is less than 20px away from the #toolbar (threshold), the #toolbar automatically becomes fixed, remaining 20px away from the top of the viewport. The page continues to scroll down, the parent element leaves the viewport completely (i.e., the entire parent element is completely invisible), and the #toolbar reverts to relative positioning.

sticky application

Sticky positioning can achieve some very useful effects. In addition to the "dynamic fixation" effect mentioned above, here are two more.

Stacking effect

Stacking is when the page scrolls so that the lower elements overlap the upper ones. Here is an example of a stack of images, where the image below scrolls over the image above.

View demo: jsbin.com/fegiqoquki/edit? html,css,output

HTML code is just a few pictures.

CSS code is extremely simple, just two lines.

div { position: sticky; top: 0;}

The idea is that when the page scrolls down, each image becomes fixed, causing the latter image to overlap the previous image.

Detailed explanation can be seen at dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

Table header lock

When scrolling large tables, the header is always fixed, or it can be implemented with sticky.

View demo: jsbin.com/decemanohe/edit? html,css,output

CSS code is also simple.

th { position: sticky; top: 0; }

It should be noted that sticky must be set above the element and cannot be set to the and element, because these two elements have no relative positioning, and the sticky effect cannot be produced.

CSS selectors can be divided into three categories, namely id selector, class selector, label selector. There are many combinations between them, such as descendant selectors, child selectors, pseudo-class selectors, universal selectors, group selectors, and so on

Thank you for your reading, I hope you have a certain understanding of the key issue of "what is the meaning of positioning in css". The specific use situation still needs to be used by everyone to understand it. Try it quickly. If you want to read more articles related to knowledge points, please pay attention to the industry information channel!

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.