HTML element positioning position-relative, Absolute, fixed, static

What's your idea of seeing this?

difference between static and relative positioning

If you can fully understand, then the CSS elements of the location of the basic things will be. This article does not have to look down.

I have contact with the web for many years, although the front-end has been contacted, but there is no systematic study, and complete practice. A lot of things are indefinitely. In fact, this is the crux of the problem.

Indefinitely, in essence, is not understood. But it is self-understanding, this is the oneself set a barrier, this barrier seems invisible but more terrible than the physical obstacles. Because everyone seems to

Always think that what you believe is right. So it's difficult, empty or zero, to start from scratch and learn a new thing from the complete system. Cause the understanding of new things always stay

At the old level, complacent. Negation may be the beginning of progress!!

------------------------------------------------------------------------------------------------

Static positioning is the default positioning model for elements. They is displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don ' t obey left , top , right and bottom rules:

Relative positioning allows you to specify a specific offset ( left , top etc) which are Relative to the element ' s normal Position in HTML flow. So if I had a textbox inside a div I could apply relative positioning on the textbox to has it display at specific PLA Ce relative to where it would normally is placed within the div :

There is also absolute positioning-whereby your specify the exact location of the element relative to the entire document , or the next relatively positioned element further up the element tree:

And when a was position: relative applied to a parent element in the hierarchy:

Note how our absolutely-position element was bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

Also observe the behaviour that fixed-positioned elements does not cause scroll because they is not considered to B e bound by the viewport:

Whereas absolutely-positioned elements is still bound by the viewport and would cause scrolling:

.. Unless of course your parent element uses to determine the behaviour of the scroll overflow: ? (if any).

With absolute positioning and fixed positioning, the elements is taken out of HTML flow.

HTML element positioning position-relative, Absolute, fixed, static