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

This article introduces the relevant knowledge of "how to understand the absolute positioning of css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In css, absolute positioning is a way to make the position of an element independent of the document flow. The element box set to absolute positioning is completely removed from the document stream and positioned relative to its containing block; by default, absolute positioning is positioned relative to the browser, in conjunction with top, right, bottom, and left.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, absolute positioning is a way to make the position of an element independent of the document flow.

The element box that is set to absolute positioning is completely removed from the document stream and is positioned relative to its containing block, which may be another element in the document or an initial containing block. By default, absolute positioning is relative to the browser, with top, right, bottom, left for positioning.

The space previously occupied by the element in the normal document stream is closed as if the element did not already exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.

Let's take a closer look at absolute positioning (absolute). In fact, absolute positioning absolute and floating float have some similarities; if you can understand floating float, it will be very helpful to understand absolute positioning absolute.

Let's start with the similarities between absolute and float: inclusiveness and high degree of deception.

Encapsulation

As the saying goes, a picture is worth a thousand words (the only difference is: the p of the following figure adds absolute)

Once you add absolute or float to an element, you add display:block; to the element. What do you mean? For example, the default width of the inline element span is adaptive, and it doesn't work if you add width to it. To set the width of width, you need to set span to display:block. But if you add absolute or float to span, the display property of span automatically becomes block, and you can specify width. So if you see absolute/float and display:block in CSS at the same time, then display:block is extra CSS code.

Highly deceptive

In the above example, add absolute to the outer p of the image, so the high deception is not well reflected. Move the absolute to the inner image, and the effect will come out:

If you have seen the details of CSS floating float, you will find that the effect is the same. But the principle behind it is actually different and not exactly the same. Add a little text and you can see it:

I am an absolutely positioned absolute element

It is obvious from the picture that the text is covered by the picture, which is different from float. Float is deceiving the parent element into thinking that it is highly collapsed, but the float element itself is still in the document stream, and the text surrounds the float element and is not obscured.

But absolute can no longer be regarded as deceiving the parent element, but there is a hierarchical relationship. If the parent element in the normal document stream is mortal, then absolute has become an immortal and, in today's words, is no longer in a dimension. From the point of view of the parent element, the image set to absolute has completely disappeared, so the text is displayed from the far left. The level of absolute is high, so the picture obscures the text.

I remember that when I first came into contact with CSS scum whose combat effectiveness was still 5, when I knew that the concept of hierarchy could appear in absolute, I mistakenly thought that I had thoroughly understood it. Now I think it is too young and too simple (of course, this is not a bad thing. Whenever you think your former scum is like tofu, it means you have made progress. On the other hand, you always think about what you were like in those days, which shows that you are still living on your old money.

With the above basics, you also need to understand the following features of absolute

How to determine the anchor point

Fall in love and kill with relative

The relationship with z-index

Reduce the cost of redrawing and reflux

How to determine the anchor point

Once the absolute is layered, the first problem that arises is where the browser displays the element. For an element in a normal document stream, the browser can calculate the location of the element based on the size and position of the parent and sibling elements. But what happens after layering? The basic ideas are as follows:

In the first case, the user only assigned absolute to the element, not left/top/right/bottom. At this point, the location of the anchor point in the upper-left corner of the absolute element is the position in the normal document stream of the element. As in the above illustration, the picture panda is the first child of the parent element, so the anchor point in the upper-left corner is the upper-left corner of the parent element's content.

If you change the text order of the picture panda and the following to make it the second child of the parent element, one picture is worth a thousand words:

I am an absolutely positioned absolute element

Conclusion repeat: the absolute element of left/top/right/bottom is not specified, and its anchor point in the hierarchy is the anchor point of that element in the normal document flow.

The second case: the user specifies a left/right,top/bottom for the absolute element

To keep it simple, let the absolute element have no parent element other than position:static. At this point, the layer where absolute is located is covered with full screen, that is, covered with body. The location is located on the body according to the location specified by the user.

When only left is specified, the left value of the anchor point in the upper-left corner of the element becomes the user-specified value. However, the top value is still the top value of the element in the normal document flow:

I am an absolutely positioned absolute element

When only right is specified, the rightvalue of the anchor point in the upper-right corner of the element becomes the user-specified value. However, the top value is still the top value of the element in the normal document flow:

I am an absolutely positioned absolute element

When only top is specified, the top value of the anchor point in the upper-left corner of the element becomes the user-specified value. However, the left value is still the left value of the element in the normal document flow:

I am an absolutely positioned absolute element

When only bottom is specified, the bottomvalue of the anchor point in the lower-left corner of the element becomes the user-specified value. However, the left value is still the left value of the element in the normal document flow:

I am an absolutely positioned absolute element

Through the combined setting of left/top/right/bottom, since there is no parent element other than position:static, the absolute element can go wherever it wants to go, and the sky is its limit.

Fall in love and kill with relative

Usually what we know about relative is (well, I admit, this is what I knew when I fought with 5 scum. If you are Frieza, you can despise this sentence): relative is mainly used to restrict absolute

As mentioned above, if the absolute element does not have a parent element other than position:static, it will be positioned relative to body, and the sky is its limit. Once the parent element is set to relative, the absolute child element will be positioned relative to its parent element, like a bird with a rope tied to its foot.

For example, you need to implement the red circle in the upper right corner of APP in iOS below.

The usual practice is to set the p of the APP image to relative, then set the red circle to absolute, and then set top/right. In this way, no matter how the user changes the position of the APP image, the red circle is always fixed in the upper right corner, for example:

.tipIcon {background-color: # f00; color: # fff; border-radius:50%; text-align: center; position: absolute; width: 20px; height: 20px; right:-10px; / / negative value is half of its own volume top:-10px;}

six

The effect is OK, and the compatibility is also OK. But there are many ways to achieve an effect in the CSS world, and which one to choose is a matter of opinion. The criteria I value more: one is simplicity, and the other is to let each attribute do its job as much as possible.

Using these two standards to view the above implementation method, there should be room for improvement. First of all, the outer layer p is too much for relative to be extremely concise. Secondly, the job of relative is to offset the element relative to its normal document stream position, but the parent layer p does not need any position offset, and the only purpose of setting it to relative is to limit the anchor point of the compare child element. So in my opinion, it doesn't let relative do his job. For example, the young lady's job is in the service industry, and she will chat with customers by the way, but after an hour of pure chat, I am afraid she will be complained.

This is the end of the content of "how to understand the absolute position of css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.