Css knows (11) -- position, css knows 11 position

Css knows (11) -- position, css knows 11 position
1. Introduction

This article will introduce position in an article. Before learning position, we should think about the question: under what circumstances should we locate it? What kind of requirements cannot be met without positioning? We need to know that every knowledge created by humans has its purpose and must solve some problems we encountered before.

If no positioning is found, the webpage is tiled from top to bottom, from left to right on the browser step by step, and the padding is adjusted through margin and padding, also, some elements are floating through float. It is enough to make some simple web pages, such as yahoo N years ago, although it seems very low now.

　　

However, in some cases, this step-by-step web page layout does not meet our requirements. We need some elements to run out, move them onto the web page, and specify a location for it. At this time, we need to use position, and it is not usable. For example:

　　

2. relative

You can see that position has four optional attributes: static/relative/absolute/fixed. 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. I will not discuss it much.

Relative positioning of relative can be easily demonstrated using an example. For example, if we write four <p> entries, you can see them without reading them.

Then, we add position: relative on the third <p> and set left and top values to see if the <p> changes.

　　

(I believe most people will ignore the second Information)

1. The third <p> position changed, respectively, and shifted to the right by 10px;
2. It is also important that the other three <p> positions remain unchanged.

Therefore, relative will lead to relative changes in its own position, without affecting the changes in the positions and sizes of other elements. This is one of the key points of relative. The second key point is that relative generates a new positioning context. The following describes the positioning context in detail. here we can use an example to illustrate the differences:

　　

Pay attention to the differences between the two figures, which will be explained below.

3. absolute

Speaking of absolute, I suggest you go to a video tutorial. The lecturer spoke very thoroughly about absolute. Some content in this article also references this tutorial. Can you share it with us!

Let's talk about things in the previous example. First, write a basic page -- four <p>

　　

Then, change the third <p> to absolute to see what will happen.

　　

From the above results, we can see the following information:

1. The absolute element is out of 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 will be destructive and cause the parent element to collapse. (Now you should be able to remember immediately that the float element will also be out of the document structure)
2. The absolute element is "package ". The width of <p> is filled with the whole screen, and the width of <p> is just the width of the content.
3. The absolute element is "followed ". Although the absolute element is out of the document structure, its position does not change, so it stays in its original position honestly, because the top and left values are not set at this time.
4. The absolute element is suspended at the top of the page, which blocks the content of the page below.

Finally, you can set the top and left values for the absolute element to customize its content, which is commonly used. Note that when top and left values are set, the element is located relative to the latest positioning context, rather than relative to the browser. The positioning context will be discussed below.

However, setting the top and left values is not the best solution for locating. For example, to keep element A above Element B, you can set Element B to absolute and adjust the margin value of Element B to make it more efficient. For example:

　　

The information mentioned above is very interesting if it involves a lot of content and is not easy to describe in the text. I suggest you go to the MOOC video tutorial.

　　

Finally, I will give you a few more tips.

1. Setting absolute will make the inline element "Block", which is described in the previous section as "display;
2. Setting absolute will invalidate the existing float of the element. However, float and absolute are not used at the same time;
3. As mentioned above, absolute will hover elements over the page. If there are multiple floating elements, how can the hierarchy be determined? The answer is "coming later"

4. fixed

In fact, fixed and absolute are the same. The only difference is that the absolute element determines the location based on the latest positioning context, while fixed always determines the Location Based on the browser.

As we have mentioned "positioning context" Many times above, what exactly is it? The answer will be revealed immediately.

5. Locate the context

5.1 positioning of relative

The positioning of relative elements is always relative to the position of the element. It has nothing to do with other elements and does not affect other elements.

　　

5.2 fixed Positioning

The position of the fixed element is always relative to the browser boundary, and has nothing to do with other elements. However, it is destructive and may lead to changes in the positions of other elements.

　　

5.3 positioning of absolute

The positioning of absolute is much more complicated than that of the first two. If top and left are set for absolute, what will the browser determine its vertical and horizontal offset based on? The answer is that the browser recursively searches for all the parent elements of this element. If an element with position: relative/absolute/fixed is found, it is located on the basis of this element. If no parent element is found, it is located at the border of the browser. See the following two figures:

　　

　　

"An ancestor element of a layer" in is the positioning context of the absolute element. Here, we can see the figure above? If you still have any questions, leave a message to me.

　　

 

6. Summary

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

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

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Welcome to my open-source project --WangEditor, simple and easy-to-use rich web text editor

Bytes -------------------------------------------------------------------------------------------------------------