HTML5 and CSS3 Fundamentals – Positioning
A Guide to Positioning HTML Elements in Your Website
In this class, we will continue with HTML page layouts—with special focus on positioning HTML elements in your page. By the end of the class, you should be in a position to position any block or section of content on your web page.
There is no point dipping your feet in on this topic, so let’s dive right in and learn how you can position HTML elements.
How to position HTML Elements
We’ll still use the <DIV> tag and CSS, but this time round we’ll add in the CSS position property. The CSS position property is used to define the type of positioning method that can be employed on an element. Basically, there are four types of positioning methods. These are static, relative, fixed and absolute.
The default method is usually the static. For instance, an element with the “position: static” will not be positioned in any special way, since the static position is the default method.
All the elements that have “position: relative” will be positioned relative to the viewport locations on the web page. You can set your top margin, right margin, bottom margin, and your left properties of a positioned element which will make the HTML element to be adjusted from its normal position.
The HTML code below illustrates this:
DIV {
position: absolute;
left: 10px;
border: 1.5px;
}
All the elements that have “position: fixed” will be positioned relative to their normal positions. You can set your top margin, right margin, bottom margin, and your left properties of a positioned element which will make the HTML element to be adjusted from its normal position.
The HTML code below illustrates this:
DIV{
position: fixed;
bottom: 2;
right: 2;
width: 160px;
border: 1px;
}
What about overlapping elements?
Well, overlapping elements in your HTML page can be set by the z-index property. The z-index property is used to define the stack order of that element which is overlapped. Such an element can be placed in front of others or behind the others.
The example below shows how the z-index property can be used to specify the positioning of overlapping elements:
IMG {
position: relative;
left: 2px;
top: 1.5px;
z-index: -2;
}
GET YOUR FREE PYTHON EBOOK!