Starting from the position attribute in CSS

I. Basic positioning principles

For front-end developers, writing CSS is an essential part of front-end development, and the position attribute in CSS is a very important aspect. As the name implies, the position is a setting for positioning HTML elements. It is the cornerstone of CSS positioning technology and seems easy to learn. Many front-end engineers also say they have a good grasp, but is it actually like this? As a newcomer who is slowly moving forward on the frontend Development Road, I dare not say so. I will share this article with you to understand the mysteries of position.

First, since it is one of the attributes in CSS, it is necessary to study the W3C CSS document. After all, this is the most detailed description of this attribute. There are a lot of teaching books on the market, and there are also a lot of relevant learning resources on the Internet. Although there are many excellent products, it takes some time, the number of people who carefully read the official documentation is often the most boring and accurate.

Well, the content about the position attribute in the official document is roughly as follows:

In CSS 2.1, a box may be laid out according to threePositioning schemes:

1. Regular document flow. It includes block-level element layout, in-line element layout, and layout of block-level elements and the relative position of the in-line elements.

2. floating. In a floating model, the elements are first located according to the normal Document Stream, then removed from the document stream, and moved left or right as much as possible based on the settings.

3. Absolute positioning. The element is completely removed from the document stream and then located based on the parent element.

If an element is a root element or has floating or absolute positioning, it is outside the conventional document stream, and other situations are within the document stream. The document contains The following sentence:Flow of an element AIs the set consistingAAnd all in-flow elements whose nearest out-of-flow ancestor isA. If I do not have deep English skills, it should be: the flow of Element A is composed of element A itself and the parent element other than the most recent document stream, which is the element in the stream of Element. (Translation is terrible. Please advise o (> others <) o ).

 

Ii. Explanation of position attributes

In CSS 2.1, the element Positioning method is determined by the combination of position and display attributes. Let's look at the position attribute first.

Optional value of the position attribute: static | relative | absolute | fixed | inherit

Default Value:Static

Meaning of each value:

Static:The box is located in normal mode. The top, right, bottom, and left attributes are invalid.

Relative:The location of the element itself is located in the same way as static, but the actual location is offset from the original location through top, right, bottom, left settings.Note:Set display to table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, the table-cell and table-caption elements cannot apply position: relative, which is also very understandable. Isn't it strange for these table-class elements to be offset from the normal position!

Absolute:The elements are separated from the document stream and are "almost" independent. Positions are set through top, right, bottom, and left. Of course, the reference base point is the parent element containing the element ~ The absolute positioning element has no effect on the positioning of adjacent elements. The cascade relationship between each other is set through z-index, and the margin of the absolute positioning element is not folded.

Fixed:This is an interesting value. Its positioning calculation method is the same as absolute positioning, but it is also different. Once the position of the element is determined, it will remain unchanged on the screen display. in the printed media type, it will appear at a fixed position on each page, in other media types, the representation is not defined. However, if you want a box to behave differently on the screen and printed media, you can use @ media rule, for example:

{:; }{:; }

There is also an inherit value. Needless to say, it is to inherit the position value from the parent element.

 

Iii. Positioning Methods: top, right, bottom, left

These four attributes can be put together. They are actually similar, but the relative baseline of positioning has changed. The instructions in this document are a bit too long, but that's what official document is, right?

Configurable values: length, percentage, auto, inherit

Regardless of the set value, it means that the upper-right lower-left margin of the element is the upper-right lower-left margin of the parent element.

I would like to mention it hereAutoValue, which is different for non-replaced elements and replaced elements auto, A non-replacement element indicates that the browser determines the content displayed based on the tag elements and attributes, for example:

 

This is a text input box. If it is changed to another attribute, the browser display will be different.

Example of replacing an element:

I'm classicemi

 

(X) Most HTML elements are non-replacement elements. They directly tell the browser about the content and then display it in the browser.

Next we will return to auto. For non-replacement elements, the effect of the auto value depends on which attributes have the same auto value. Isn't it easy to understand? Okay, let's give the following example:

          A frame document with CSS 2.1                                                                                   ...        ...        ...        ...      

The layout displayed in the browser is roughly:

In the code, the attributes of auto are: # header bottom, # sidebar right, # footer top. for # main, its height and width are both auto. That is to say, the length and width of main are adaptive and can automatically fill in available space, that is, the upper-right-lower left distance of an element can be automatically adjusted based on the association, or the relationship between the child elements of the common parent element.

 

Iv. Normal Flow

As mentioned above, "regular document Flow" is actually the Normal Flow in W3C documents, which can also be called a regular Flow. The conventional stream mainly involves two aspects: Formatting Context and Relative Positioning ).

The Formatting context is divided into Block Formatting Contexts (BFC) and Inline Farmatting Contexts (IFC) according to the W3C documentation. I don't think it is necessary to translate the context into Chinese, if I say "block-level formatting context", can you understand what it means? So BFC and IFC are good.

The so-calledBFC, The document explains very well. In short, it is the sequential vertical arrangement of block-level boxes. Of course, it cannot be so simple, because BFC is generated inside the block-level box, that is, it can be nested.

            BFC                                                             

However, when the block-level box is an in-row box, BFC will not be generated, but IFC will be generated. However, as long as there is a block-level box in the sub-element, BFC will be generated.

IFCIFC includes text and in-line elements. For text, there are actually many famous typographical terms, especially for English characters or letters. If you are interested in text typographical, we recommend that you use a video tutorial called "Typography", which is a webpage design and typographical video tutorial produced by the famous IT teaching website "lynda.com" in the United States. for. web. designers, as for the download method, I will not talk about it here. I believe everyone has a way to show their own advantages.

If the element in a row contains text at the same time, the situation will be complicated:

                                                 Something                        

Observe the differences between the bottom alignment of span and div.

The vertical alignment of the line frames:

• Baseline
• Sub
• Super
• Top
• Text-top
• Middle
• Bottom
• Text-bottom
• Length
• %
• Inherit

For example:

            Vertical-align                                     hello            world            

 

Horizontal Alignment:

When the sum of the width of the box in the row is smaller than the width of the box that contains the box, the horizontal align is determined by the text-align attribute.

 

The relative positioning and other content related to positioning, such as margin collapse, will be introduced in subsequent articles.

 

References:

1. http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

2. http://www.w3help.org/zh-cn/kb/010/

3. http://www.w3school.com.cn/index.html