Aim and shoot - Positioning with CSS
February 28th 2016
Introduction to CSS Positioning
Whereas HTML is a powerful language to structure content in a hierarchical way, CSS helps extremely well in styling the page to a visually appealing document. One of the most impactful css properties is position:. This attribute let's you define where on a page you want to place on the page. There are four types of positioning, which I will discuss below.
1. position: static;
By default, css will try to position any element in the top left corner of the web browser, and stack one element next or below the other. This default positioning is called "static" and is more or less what the position of the page will look like if there is no css style applied to the HTML.
One could compare the positioning somewhat to the bubble shooter game, in which you have to try to position bubbles in a certain way:
With this positioning method, the different HTML elements cannot be influenced in any way, and will always follow the pattern of going to the first available spot in the top left corner of the page. Attributes such as top, bottom, left or right won't work in this position setting.
top, bottom, left or right, the element will keep within the natural flow of the document and land on the first available spot in the top left corner.2. position: relative;
The position relative will place an element relative to its normal position. As a designer/coder, you can change the position by using top, bottom, left or right.
top, bottom, left or right. As the figure illustrates, the slightly transparent red bubble is the natural place. I shifted one bubble to the right by using right: 10px;, another example shows one to the bottom by using bottom: 20px; and another example shifts the element 40px to the left and 60px down. You can also position an element upwards, which may it go out of the page etc. This is helpful when for example you want to overlay text over an image.It is important to note however that any following element will keep considering the "natural" position of the element as a reference point. For example if I shift the red bubble down, the next bubble will not take it's place, but act as if the red bubble were in the right spot (static positioning).
3. position: fixed;
The position fixed lets you stick an element to anywhere on the page. If the user scrolls up or down, the element will always remain in the same place. This attribute value can be very helpful for sticking navigation bars to the top of the page or position chat-boxes in the bottom-left corner etc.
4. position: absolute;
The position absolute let's you position an element relative to the first positioned (any element that is not positioned 'statis') ancestor in the family tree. If all elements are static, and there are no ancestors, the element will be positioned relative to the
