The Different Types of CSS Positioning Explained
CSS (Cascading Style Sheet) is a document used to describe to the web browser how to display its content on the page. It can be written within ‘<style>’ tags or as an external CSS file which is included to a HTML document. CSS was brought about to solve the issue of presentation semantics being used within a HTML document.
One of CSS’s primary features is controlling the positioning of certain elements held on a HTML page. CSS Positioning has several different types which can be used to achieve different effects. They are as follows: -
Static positioning is the default positioning type used by the browser. All elements are statically positioned when they are rendered. It basically means that element will flow with the page as it would normally. It is not often used in web development, one of the only examples of it’s use could be to remove another style being placed outside of your control. This would let the element behave normally again, however this is rare since positioning doesn’t naturally cascade down to its child elements.
Fixed positioning is used to position something exactly on the screen, regardless of scroll. The easiest way to describe fixed positioning is to imagine the browser window as an actual window. Everything on the page is on the other side, except items that have been fixed. These fixed items are stuck on the outside of the glass. Fixed positioning isn’t commonly used, but it can be handy if there is a certain element that you want to always be in view for the user. However, using this excessively can cause display issues for people with smaller resolution monitors.
Relative positioning is the one most frequently misunderstood, even though it can be one of the most useful. To some degree it has three uses depending on if coordinates are set, e.g. top: 10px;. If a top/left/right/bottom is set, the element will be positioned “relative to itself”. From the previous example, it would mean that the element would be moved down 10 pixels. This can be very useful when it comes to lining up elements exactly.
If there are no coordinates set, fixed positioning will limit the scope of absolutely positioned child elements to this element. Finally, relative positioning gives the element the ability to have a z-index, which don’t work properly with elements with static positioning. When an element is positioned relatively, will automatically appear on top of any statically positioned elements by default.
This positioning type is probably the most powerful. It allows you to position any element exactly where you want it on the page, which defaults to the HTML document as its scope. If a parent of an absolute element has a positioning type of relative, then it will have its scope set to this.
Although absolute positioning is very useful, it should be used sparingly since it will drastically reduce the flexibility of a website, as it removes the element from the flow of the page. This means no other elements on the page will effect its position.