How much do you know about css (11)--position_html/css_WEB-ITnose

1. Introduction

This article will use an article to introduce position. Before learning position, we should think about a question: under what circumstances do we need positioning? If there is no positioning, what needs will not be met? We must know that every piece of knowledge created by humans has its use and must solve some problems encountered before.

If there is no positioning, the web page we make will be tiled on the browser step by step from top to bottom, left to right, plus adjusting the spacing through margin and padding, and through float to float certain elements. It is enough to make some simple web pages, such as Yahoo N years ago, although it seems very low now.

　

But in some cases, this step-by-step web page layout cannot meet our requirements. We need certain elements to come out and float on the web page, and we need to specify a position for it. At this time we need to use position, and it is absolutely necessary. As shown below:

　

2. relative

From the information, we can see that position has four optional attributes: static/relative/absolute/fixed. Among them, static (static positioning) is the default value, that is, if no other position value is set for all elements, its position value is static, and it is the same as without it. No more introduction.

Relative positioning relative can be easily demonstrated with an example. For example, if we write 4

, everyone can know what it looks like without looking at it.

Then we are on the third & lt; p & gt; add posity: related and set the left and top values ​​to see this & lt; p & gt; what changes.

　

In the picture above, you should identify two pieces of information (I believe most people will ignore the second piece of information)

The third one< The position of p> has changed, moving 10px to the right and down respectively;
The positions of the other three

have not changed, which is also very important.

Therefore, relative will cause relative changes in its own position without affecting changes in the position and size of other elements. This is one of the main points of relative. There is a second important point, which is that relative generates a new positioning context. There is a detailed introduction to positioning context below. Here you can use an example to show the difference:

　

Pay attention The difference between these two pictures will be explained below.

3. absolute

Speaking of absolute, I recommend everyone to watch a video tutorial. The instructor explained absolute thoroughly. Some of the content of this article is also based on this tutorial. Please share the good stuff with us!

Let’s get back to the subject, let’s take the previous example and write a basic page first?? 4

　

Then, we Change the third

to absolute and see what happens.

　　　

From the above results, we can see several pieces of information:

The absolute element is out of the document structure. Unlike relative, the positions of the other three elements are rearranged. Whenever an element breaks away from the document structure, it becomes destructive, causing the parent element to collapse. (At this point you should be able to remember immediately that the float element will also be separated from the document structure)
The absolute element has "wrapping properties". Previously, the width of

filled the entire screen, but now, the width of

is exactly the width of the content.

Absolute elements have "following properties". Although the absolute element is separated from the document structure, its position has not changed, and it still stays in its original position, because we have not set the values ​​​​of top and left at this time.
The absolute element will float above the page and block the page content below.

Finally, by setting the top and left values ​​​​for the absolute element, you can customize its content, which is commonly used in daily life. What needs to be noted here is that when the top and left values ​​are set, the element is positioned relative to the nearest positioning context, not relative to the browser. Positioning context will be discussed shortly below.

But sometimes setting the top and left values ​​is not the best solution for positioning. For example, if you want element A to be immediately above element B, you can set element B to absolute and then adjust the margin value of B. This is more efficient. As shown below:

　

The information mentioned above, if expanded, contains a lot of content, and it is difficult to describe in text. I still recommend everyone to watch the video on MOOC.com The tutorial is very interesting.

　

　Finally, a few more tips.

1. Setting absolute will cause the inline element to be "blocked", as mentioned in the previous section when displaying;
2. Setting absolute will invalidate the element's existing float. However, float and absolute are rarely used at the same time;
3. As mentioned above, absolute will make elements float on the page. If there are multiple suspended elements, how to determine the level? The answer is "the last ones come first"

4. fixed

In fact, fixed and absolute are the same. The only difference is that the absolute element determines its position based on the nearest positioning context, while fixed is always based on the browser Determine the location.

"Positioning context" has been mentioned many times above, so what exactly is it? The answer will be revealed soon.

5. Positioning context

5.1 Relative positioning

The positioning of a relative element is always relative to the element's own position. It has nothing to do with other elements and will not affect other elements. .

　

　5.2 fixed positioning

　 Fixed element positioning is always relative to the browser boundary and has nothing to do with other elements. But it is destructive and causes changes in the position of other elements.

　

5.3 Absolute positioning

The positioning of absolute is much more complicated than the first two. If top and left are set for absolute, how will the browser determine its vertical and horizontal offsets? The answer is that the browser will recursively search all parent elements of the element. If an element with position: relative/absolute/fixed is found, it will be positioned based on that element. If not found, it will be positioned based on the browser boundary. As shown in the following two figures:

　　

　

　　The "ancestor element of a certain layer" in the figure above is the positioning context of the absolute element. Having said that, can everyone understand the picture we mentioned above? If you still don’t understand, you can leave a message to me.

　

6. Summary

I feel that this article is the most difficult to write in this series. It has many knowledge points and is very difficult to understand. Therefore, position is also a key knowledge of CSS. Front-end developers who do not understand position should hurry up and make up for it.

After writing so much, I still feel that the writing is not very comprehensive or not very systematic. I hope everyone can give me your feedback. This blog series is the first version of this tutorial. I plan to take the time to record a video version later. I hope it will be more comprehensive and systematic.

----------------------------------------------- -------------------------------------------------- ---------------

Welcome to follow my tutorial: "From Design to Pattern" " In-depth understanding of javascript prototypes and closures Series 》《Microsoft petshop4.0 source code interpretation video》《json2.js source code interpretation video》

You are also welcome to follow my open source project??wangEditor, a simple and easy-to-use web rich text editor Device

---------------------------------------- -------------------------------------------------- ------------------