cool hit counter The difference between the four common types of positioning in CSS_Intefrankly

The difference between the four common types of positioning in CSS


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

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

But a lot of zero-based front-end white do not know what the role of these four positioning methods and differences, in the use of the time are very inflexible, you know, want to do a good job of web layout, these four positioning methods are the essence of ah, learn to position the layout, front-end development is easy!

So today we'll explain the role and differences between these 4 types of positioning in CSS! To help you figure out the beauty of these 4 layouts!

I. General positioning (Static)

In our development process, all boxes are positioned in the normal stream unless specifically specified. The position of the element box in the normal stream is determined by the position of the element in the (X)HTML. The block-level elements are arranged sequentially from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box. Intra-line elements are arranged horizontally in a row. This will not be described too much.

II . Relative positioning (relative)

In our front-end development, relative relative positioning has always been seen as part of the normal document flow positioning model, where the position of a positioned element is moved relative to its position in the normal flow. An element that uses relative positioning is still going to occupy its original position regardless of whether it makes a move. Moving the element causes it to overwrite the rest of the box.

result

III . Absolute positioning (absolute)

In front-end development, it is positioned relative to the nearest parent element that has been positioned, or if there is no nearest parent element that has been positioned, then it is positioned relative to the initial containing block (e.g. body). An absolutely positioned box can be moved up, right, down, or left from its containing block.

result

IV . fixed positioning (fixed)

The rest of the features are similar to absolute positioning relative to the browser window. Fixed elements are elements that are fixed in a certain position in the browser, absolute positioning is fixed on the page, if you scroll the scroll bar then the absolute positioned elements will also scroll up, fixed elements will not.

lastly

These several positioning methods have a lot of advantages, many white people often ask the old Lee, we write the page, which of these four layout methods should be used? (That's a very white question at first.)

Just to give you a final note, in our professional front-end development work nowadays, the most used is not absolute positioning or relative positioning, but a combination of absolute and relative positioning. (White: WTF ???? A joint body? )

It's not that there's some new method of positioning in the ensemble lah. Rather, we go to a layout writing specification in front-end development: the

Parent-phase child absolute (i.e., the parent element uses relative positioning and the child element uses absolute positioning, combined together to achieve layout. )

This layout specification is the accepted layout method for front-end development at this stage, and it also prevents many errors. If you don't know how to use the "Father's Phase, Son's Jedi", then follow me! Follow old Lee from a white boy to a front-end god!

Give us a nod!


Recommended>>
1、Practicing and deciphering the latest ways to generate applet codes
2、How to configure intranet DNS service on Ubuntu 1604 server
3、From darkness to light the path of Python package installation progression
4、The first question what does Ali ask in the interview
5、As the sun sets on Internet finance new finance is marching away with a sword

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号