Detailed explanation of the differences between the four types of positioning in CSS

We all know that the commonly used positioning methods in CSS in front-end development are

There are four types of positioning: normal positioning, relative positioning, absolute positioning and fixed positioning.

However, many front-end novices with no basic knowledge do not know the functions and differences of these four positioning methods, and are very inflexible when using them. You must know that if you want to do a good job in web page layout, these four positioning methods are the essence. If you learn positioning and layout well, front-end development will be easy!

So today we will explain the functions and differences of these four types of positioning in CSS! Help everyone understand the wonderful uses of these 4 layouts!

1. Static positioning

In our development process, all boxes are positioned in the common flow unless otherwise specified. The position of an element's box in the normal flow is determined by the element's position in the (X)HTML. Block-level elements are arranged from top to bottom, and the vertical distance between boxes is calculated by the vertical margin of the box. Inline elements are laid out horizontally in a row. I won’t describe this in detail.

2. Relative positioning

In our front-end development, relative positioning has always been regarded as part of the normal document flow positioning model, and the position of the positioned element moves relative to its position in the normal flow. An element using relative positioning will still occupy its original position regardless of whether it is moved. Moving an element will cause it to cover other boxes.

result

3. Absolute positioning

In front-end development, relative to the nearest positioned parent element. If there is no nearest positioned parent element, its position is relative to the initial containing block (such as body). An absolutely positioned box can be moved up, right, bottom, or left from its containing block.

result

4. Fixed positioning

Relative to the browser window, the rest of the characteristics are similar to absolute positioning. A fixed element is an element that is fixed at a certain position in the browser. An absolutely positioned element is fixed to the page. If you scroll the scroll bar, the absolutely positioned element will also scroll up, but a fixed element will not.

at last

These positioning methods have their own advantages. Many newbies often ask Lao Li, when we write a page, which of these four layout methods should we use? (This question sounds very simple)

Finally, let me tell you that in our current professional front-end development work, the most commonly used is not absolute positioning, nor relative positioning, but the combination of absolute positioning and relative positioning. (Xiaobai: WTF???? Fusion???)

It’s not that the combination brings about any new positioning method. Instead, we go to a layout writing specification in front-end development:

Parent-child absolute (that is, the parent element uses relative positioning, and the child element uses absolute positioning, and they are combined to achieve layout.)

This layout specification is a recognized layout method for front-end development at this stage, and it can also avoid many errors.

This is the end of this article about the detailed explanation of the four types of positioning in CSS. For more information about the differences between the four types of CSS positioning, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!