Positions
In this article we are going to learn about positions, static position, relative position, absolute position and fixed position in css, how to position html elements in web page.
We learnt about css in general, fonts, colors, background colors, borders, margin, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css and selectors css so, we will be focusing on positions.
Positions
Positions in css are static position, relative position, absolute position and fixed position and are css properties used as methods of positioning html elements.
Static position
Static position is a default position of any html element in webpage and cannot be affected by left, right, top and bottom css properties.
Let us create a div element with static position applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.static-example {
position: static;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="static-example">This is a div element with static position applied.</div>
</body>
</html>
So, we should have the following results.
Relative position
Relative position, positions any html element to its normal position and the left, right, top and bottom Cascading Style Sheets properties can affect it.
Let us create a div element with relative position applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.relative-example {
position: relative;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="relative-example">This is a div element with relative position applied.</div>
</body>
</html>
So, we should have the following results.
Absolute position
Absolute position, positions any html element relative to its parent but out of normal flow. An element with absolute position will behave like is overlaping its parent element and other elements.
Let us create a div element with absolute position applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.absolute-example {
position: absolute;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="absolute-example">This is a div element with absolute position applied.</div>
</body>
</html>
So, we should have the following results.
Fixed position
Fixed position, positions any html element to its fixed position and the affected element cannot be moved or scrolled as the user scrolls up ad down of the webpage, it stays on its position fixed.
Let us create a div element with fixed position applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.fixed-example {
position: fixed;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="fixed-example">This is a div element with fixed position applied.</div>
</body>
</html>
So, we should have the following results.