Introduction
Now that we've covered the concepts to CSS display and visibilty properties, we can move over to another vital pillar of layout designing i.e positioning.
Positioning simply refers to how an element is positioned on a webpage. It can be fixed within the viewport, or placed at the top right corner of an element and so on.
The type of positioning of an element directly relates to whether the properties top, right, bottom and left can move it around the document and if they can then how.
These properties work just like margin-top, margin-right and so on - the main difference is that these properties make the element position without actually affecting other elements on the page. You will understand this way more better when you read along this whole chapter and do some experiments on your own.
The property that we will be looking in this chapter specifically is the position property so let's dive into its exploration right away!
The position property
The position property is used to set the type of positioning on a given element and includes the values:
static: (default) the element is positioned normally and won't be affected by the four moving properties as discussed aboverelative: the child elements are positioned relative to the given elementabsolute: the element is positioned absolutely within its first relative parent.fixed: the element is fixed into the viewport.
Let's discover each one:
static
Static positioning is the default positioning for HTML elements.
An element statically positioned can't be panned around using the properties top, right, bottom and left since it's static i.e unchanged.
Furthermore if any absolute element is placed in a static element and moved around, the movement would not be relative to the static element.
Following we make the p element static which is the default positioning already:
p {
position: static;
}relative
A relatively positioned element is one that moves relative to its original position, and that defines the behavior of its absolute children.
Unlike static elements, relative elements can be moved around using top, right, bottom and left and when this is done the movement is relative to the original position of the element.
Let's illustrate all these ideas with a simple example.
Following we have created a couple of p elements, with #p2 positioned relatively.
<p>A paragraph</p>
<p id="p2">A relatively positioned paragraph</p>
<p>A paragraph</p>#p2 {
position: relative;
/* make #p2 stand out with the following styles */
background-color: yellow;
}Here's how they all look initially:
A relatively positioned paragraph
Now to illustrate the difference between static and relative elements we'll carry out some movement using the top property. Following we write some CSS to move all the p elements upwards by 20px:
p {
top: -20px;
}A relatively positioned paragraph
As you can clearly see, the top property only had effect on the relative positioned #p2 element. Also notice that the element moved relative to its original position.
There is yet another characteristic of relative positioning, related to absolute elements, which we shall cover in the next section.
absolute
Absolute elements are the ones positioned independently within their nearest relative ancestor.
Making this simpler, absolute elements are simply positioned absolutely without affecting their siblings, within their first ancestor that has position: relative set.
If none of the parents has this property set, then the <body> element is taken to be the nearest relative ancestor.
Below we demonstrate absolute positioning in a very simple way. A more useful case follows it:
p {
position: absolute;
border: 1px solid #ddd;
}An absolutely positioned paragraph
top right.... an absolutely positioned element remains in its original position.As we said earlier that an absolute element moves relative to its first parent with position: relative or else relative to the viewport, we will now show what this means with a real example.
First let's show you how the unpositioned example looks. We have a span within a div of height 200px.
<div>A div <span>A span</span></div>And now let's do some positioning:
div {
position: relative;
}
span {
position: absolute;
right: 0;
top: 0;
}Since the actual parent of span, which was div was relatively positioned, the span element moved relative to it. In line 6 we set right: 0 so that the absolute span can be positioned to the extreme right of its parent div. And similarly top: 0 accounts for sending it to the extreme top.
If we had set bottom: 0 instead of top: 0 the following would've been the result:
top: 0;bottom: 0 then the element is stretched within its parent in that plane.
If we removed position: relative from the div then our span would've moved relative to the next parent with this property set. Since in this case there is no such parent, the viewport becomes the relative parent.
Notice how in the following example the span gets positioned to the top-right corner of the viewport instead of its actual parent i.e div.
div {
/* position: relative; */
}
span {
position: absolute;
right: 0;
top: 0;
}Now these examples may help you in visualising the concepts to some extent but you won't really get the hang of absolute positioning until and unless you experiment with different markups and different CSS properties yourself.
Absolute positioning is very useful in some cases while designing websites and therefore knowing all the ways it works is essentially important to prevent any unexpected layouts.
fixed
Just as the name suggests, fixed elements are fixed into the viewport, such that when we scroll the page it remains exactly in the same place.
When an element is made fixed, the following sequence of events happen:
Firstly, if the element's width it set to auto, it shrinks down to just accomodate its content (much like what happens with inline elements).
To make the width fill the entire viewport we need to set it to 100% - the same goes for height too - 100% to fill the entire viewport vertically.
left: 0;right: 0 and top: 0;bottom: 0 respectively just like we showed you in the absolute positioning example above. However it makes more sense to give a width of 100% rather than setting left: 0;right: 0.Secondly, if untouched by the properties top, right, bottom and left, a fixed element's top property is set equal to its distance from the top of the document - and similarly its left property is set equal to its distance from the left of the document.
Hence elements that are within the viewport's height and width, initially, remain in their original places, whereas those greater than these go out of the viewport.
However, if the top, right... properties are specified, the element is positioned relative to the viewport, always.
Following we illustrate fixed positioning:
<div>A fixed div</div>div {
position: fixed;
/* the style below is given to help you visualise the example */
background-color: yellow;
}If you notice in the link above, fixed positioning causes the div to shrink down to only accomodate its content.
If we need to fill up the entire viewport, we'll need to set width: 100% on the element. This is shown below:
body {
margin: 0;
}
div {
position: fixed;
width: 100%;
/* the style below is given to help you visualise the example */
background-color: yellow;
}margin: 0 on body so that div's width doesn't exceed the viewport. A margin on body would've otherwise caused the element to be initially shifted left of the viewport.As we shall see below, there are even ways to mitigate the case where
body has margins, by explcitly setting top and left properties to 0 on the fixed element.Now open up this link, and see how the div fills up the entire viewport's width.
To understand the second event discussed above, at the start of this section, we put up the following example.
We have a couple of elements preceding a div so that we can visualise what happens once we make the div fixed.
<p>A paragraph</p>
<p>Another paragraph</p>
<div>A div</div>
<p>A paragraph below</p>This is how is looks initially:
The moment we make the div fixed by setting the following CSS, what happens can be seen in the live example below.
div {
position: fixed;
background-color: yellow;
}First of all, the width of the div shrinks down to just accomodate its content; and secondly its distance from the left and top of the page, initially, is made its left and top values respectively.
Notice one more thing here that, as soon as you fix div, the content below it is shifted upwards. This happens because now the div is positioned relative to the viewport, and is no longer following the normal document layout.
Recall that this also happened when we positioned a div absolutely - both these positions, fixed and absolute, remove the element from normal document layout.
Making an element fixed or absolute is just like doing the following.
First without any positions given to any element the following markup is just how the individual elements show up on a webpage.
<p>A paragraph above</p>
<div>A div</div>
<p>A paragraph below</p>However, when we do apply fixed or absolute on, let's say, the div element above, it's much like we've removed it from between the two p elements.
<p>A paragraph above</p>
<div style="position: fixed">A div</div>
<p>A paragraph below</p>This is exactly what happens inside the browser's layout engine - the element preceding the fixed or absolutely positioned element and the one following it are both layed out one after another.
Moving on, one final thing is left to be discussed about fixed positioning and the operation of top and left properties.
As we've said before, when an element is fixed, it's top and left properties are set equal to its initial distance from the top of the page, excluding any margins.
To override this default behavior we can simply give a top, or left (or even right or bottom) value to the element, which will consequently position itself relative to the viewport by the specified values.
fixed positioning can be simply thought of as absolute positioning, just that now it's relative to the viewport!Following is an illustration.
div {
position: fixed;
width: 100%; /* fill the entrie viewport */
left: 0;
top: 0;
/* the style below is given to help you visualise the example */
background-color: yellow;
}This is the same as the code above, except for that now we are manually moving the div so that it aligns with the left and top edges of the viewport.
With a good foundation on fixed positions, let's now get into the testing phase!
How will the div shown below be displayed on the viewport?
<div>A div</div>div {
position: fixed;
width: 100%;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
}fixed works similar to absolute, except for that it's always relative to the viewport!
- It will fill the entire viewport.
- It will fill the entire viewport, only horizontally.
- It will fill the entire viewport, only vertically.
