CSS know how much (one)--position

1. Introduction

This article will use an article to introduce position (positioning), before learning position, we should consider a question: Under what circumstances do we need to locate? What if we don't have a location to meet our needs? we need to know that every knowledge created by man has its uses, and it has to solve some problems that have been encountered before.

If there is no location, the pages we make will be a step-by-step, top-down, left-to-right tile on the browser, with margin and padding adjusted for spacing, and float for some elements. It's enough to do some simple Web pages, such as Yahoo, which was n years ago, though it looks low.

　　

However, in some cases, this step-by-step page layout does not meet our requirements, we need some elements to run out, hover over the page, and need to assign it a location. At this time we need to use the position, and is not used. Such as:

　　

2. Relative

Check the data to know, position altogether has four optional attributes: Static/relative/absolute/fixed. Where static is the default value, that is, all elements if you do not set the other position value, its position value is static, and it is the same as without it. It's not a lot of introductions.

Relative positioning relative can be easily demonstrated with an example. For example, we write 4 <p>, the appearance of people do not have to look and know.

We then add position:relative to the third <p> and set the left and top values to see what the <p> has changed.

　　

, you should identify two messages (I believe most people will ignore the second message)

1. The third <p> has a position change, moving to the right downward 10px;
2. It is also important that the other three <p> locations have not changed.

As a result,relative can cause relative changes in its position without affecting the position and size of other elements . This is one of the main points of relative. The second important point is that relative produces a new positioning context with a detailed description of the positioning context, which can be shown by an example:

　　

Note the differences between the two charts, which are explained below.

3. Absolute

Said Absolute, recommend everyone to see a video tutorial, lecturer on Absolute speak very thorough, this article is also reference to some of this tutorial, good things to share with you!

Let's go back to the story of the previous example, write a basic page--4 <p>

　　

Then we change the third <p> to absolute and see what happens.

　　

From the above results, we can see some information:

1. The absolute element is detached from the document structure . Unlike relative, the positions of the other three elements are rearranged. As long as the element is out of the document structure, it can be destructive , causing the parent element to collapse. (You should be able to immediately remember that the float element is also out of the document structure)
2. The absolute element has a " wrap " feature. The width of the <p> before is full of the entire screen, and the width of <p> is exactly the width of the content.
3. The absolute element has a " follower ". Although the absolute element is out of the document structure, its position has not changed, but it is still in its original position, because we do not set the value of top and left at this time.
4. The absolute element hovers over the page, obscuring the contents of the page below.

Finally, by setting the top and left values for the absolute element, you can customize its content, which is usually used more often. It is important to note that when you set the top and left values, the elements are positioned relative to the nearest positioning context, not relative to the browser. The positioning context is immediately described below.

However, sometimes setting top and left values is not the best solution for positioning. For example, if you want element A to be immediately above the element B, you can make it more efficient by setting element B to absolute and then adjusting the margin value of B. Such as:

　　

The above mentioned information, if the deployment, the content is very much, and the text is not good description, or recommend everyone to see the network of the video tutorial, speaking very interesting.

　　

Finally, a few small points of knowledge.

1. Setting the absolute causes the inline element to be "block", which is already mentioned in the previous section.
2. Setting absolute will invalidate the existing float of the element. However, the use of float and absolute at the same time is not much;
3. As mentioned above, absolute causes elements to hover over the page, and if there are multiple suspended elements, how is the hierarchy determined? The answer is "later on."

4. Fixed

In fact, the fixed and absolute are the same, the only difference is that the absolute element is based on the nearest positioning context to determine the location, and fixed always based on the browser to determine the location.

The "positioning context" has been mentioned many times, so what is it exactly? The answer is immediately revealed.

5. Positioning the context

Positioning of 5.1 relative

The positioning of the relative element is always relative to the position of the element itself, and does not matter with other elements, nor does it affect other elements.

　　

5.2 Fixed positioning

The positioning of a fixed element is always relative to the browser boundary and is not related to other elements. But it is destructive and can cause changes in the location of other elements.

　　

Positioning of 5.3 Absolute

The positioning of absolute is much more complex than the previous two. If you set the top and left for absolute, what will the browser do to determine its vertical and horizontal offsets? The answer is that the browser recursively finds all the parent elements of the element, and if a position:relative/absolute/fixed element is found, the element is positioned as a datum, and if it is not found, it is positioned at the browser boundary. Shown in the following two graphs:

　　

　　

The "one layer ancestor element" in the absolute element is the positioning context of the In this case, we can see the figure in the above, will you understand? Still have not understood can leave a message to me.

　　

6. Summary

I feel position this article is the most difficult to write this series of articles, it has more knowledge points, and very difficult to understand, so position is also a key knowledge of CSS, do not understand position front-end developers to seize the evil to fill.

Write so much, feel or write is not very comprehensive, or is not very systematic, I hope you give feedback to me. This blog series is the first version of this tutorial, I plan to take time to record a video version, then I hope it will be more comprehensive system.

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

Welcome to my Tutorial:"From design to Mode" " deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

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

CSS know how much (one)--position