Four kinds of positioning differences in CSS



As we all know, the common positioning methods of CSS in front-end development are

General positioning, relative positioning, absolute positioning and fixed positioning.

But many zero base front-end Xiaobai don’t know the role and difference of these four positioning methods. They are very inflexible when they are used. You should know that if you want to do a good job in web page layout, these four positioning methods are the essence. Learning positioning layout well, front-end development is easy!

So today we will explain the role and difference of these four kinds of positioning in CSS! Help you understand the magic of these four layouts!

1、 General positioning (static)

In our development process, all boxes are positioned in normal flow unless specified. The position of the element box in a normal stream is determined by the position of the element in (x) HTML. Block level elements are arranged from top to bottom, and the vertical distance between frames is calculated by the vertical margin of frames. Elements in a row are arranged horizontally in a row. This is just a description.

2、 Relative positioning

In our front-end development, relative positioning has always been regarded as a part of the common document flow positioning model. The positioning element moves relative to its position in the common flow. Using a relatively positioned element, whether it moves or not, the element still occupies its original position. Moving an element causes it to overlay other boxes.


3、 Absolute positioning

In front-end development, relative to the nearest parent element that has been located, if there is no nearest parent element that has been located, then its position is relative to the original containing block (such as body). An absolutely positioned box can be moved up, right, down, and left from its containing block.


4、 Fixed positioning

Compared with the browser window, other features are similar to absolute positioning. The fixed element is the element fixed in a certain position of the browser. The absolute positioning is fixed on the page. If you scroll the scroll bar, the absolute positioning element will also roll up, and the fixed element will not.


These positioning methods have their own advantages. Many Xiaobai often ask Lao Li, when we write a page, which of these four layout methods should be used? (the question is very clear when you listen to it.)

Finally, let’s talk about it. In our professional front-end development work, what we use most is not absolute positioning or relative positioning, but the combination of absolute positioning and relative positioning. (Xiaobai: WTF)

It’s not that there is a new positioning method. It’s a layout specification in front-end development

The parent element uses relative positioning, the child element uses absolute positioning, and the layout is realized together

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

This article about the detailed explanation of the four positioning differences in CSS is introduced here. For more information about the differences in the four positioning of CSS, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!