Understanding positioning is quite important as it is one of the most important features of CSS. Positioning helps us in organizing and setting the location of the HTML elements in a web page.
Positioning properties in CSS have 3 functions.
- They allow you to position an element on the webpage.
- For placing an element on top of or behind another element.
- Define what happens when an element’s content is bigger than its size.
After the position property is set, you can use top, right, bottom, and left properties to position any of the element on the web page. These properties work differently depending on the positioning method.
Types of Positioning in CSS3
There are 4 different positioning methods: Static, Fixed, Relative, and Absolute.
Static Positioning
By default, HTML elements are positioned static. Static elements are positioned according to the normal flow of the page. They are not affected by the top, bottom, right, and left positioning properties.
Fixed Positioning
Fixed position always positioned an element relative to the browser window, according to the values set by the top, right, bottom, left properties – and will not move when the window is scrolled.
Fixed elements are removed from the normal flow. The webpage and other elements behave as if the fixed positioned element does not exist.
Fixed elements can overlap other HTML elements on the page, or be overlapped by others too.
Example:
div.logo {
position: fixed;
top: 10px;
left: 15px;
}
Relative Positioning
An element that has relative position is positioned relative to its normal default position.
The content inside the relative elements can be moved and placed to overlap other elements, but the space allotted for the element is still preserved in the normal flow.
Relative positioned elements are often used as the container block (parent element) for absolute positioned elements.
Example:
h1.move-left {
position: relative;
left: -30px;
}
h1.move-right {
position: relative;
left: 50px;
}
Example:
div.move-up {
position: relative;
top: -40px;
}
Absolute Positioning
An absolute element is always positioned relative to the first parent element that has a positioning other than static. If no such parent element is there, the containing block is set as <html>.
Absolute elements are removed from the normal flow. The webpage and other elements behave as if the fixed positioned element does not exist.
Absolute elements can also overlap other HTML elements, or be overlapped by them also.
Example:
div.item-title {
position: absolute;
top: 200px;
left: 170px;
}
Overlapping of Elements
When positioning of the elements are outside the normal flow (fixed, absolute or relative), they can overlap other elements, or be overlapped by them.
Overlapping elements can be considered stacked one on top of the other. Each element’s z-index property can be used to specify its stack order (which element should be placed on top of, or below, the others).
The z-index can have a positive or negative integer value.
An element with a greater z-index value is always on top of an element with a lower z-index value.
Example:
div.back-image {
position: absolute;
top: 10px;
left: 20px;
z-index: -2;
}
Note: If 2 positioned elements overlap without their z-index specified, the element placed later in the HTML code will be on top of the other.
CSS Position Properties
Position property in CSS specifies the type of positioning method used for an element – absolute | relative | fixed | static.
| Default value: | static. Normal document flow. |
| Inheritance: | Not inherited by default. |
| Animation: | Not animatable. |
| CSS Version: | CSS2 |
Browser Support
The numbers denote the 1st version of the respective browser to fully support the position property.
| Browser | Chrome | IE | Firefox | Safari | Opera |
| 1st Version | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
CSS Syntax
Position in CSS: static | absolute | fixed | relative | initial | inherit;
CSS positions and their description
| Value | Description |
|---|---|
| Static | Default value.Order of the elements’ appearance is as per the document flow. |
| absolute | The element is positioned with reference to its first positioned (not static) parent element. If no non-static positioned parent is there, the containing block is set as <html>. |
| Fixed | The element is positioned relative to the browser window. |
| Relative | The element is positioned relative to its normal position.Example: “left:10px;” adds 10px to the element’s Left position. “right:-30px;” reduce its normal Right position by 30px. Also this is used to define the parent element, whose child we want to position as absolute. |
| Initial | Sets this property to its default value. |
| Inherit | Inherits this property from its parent element. |
All CSS Positioning Properties
| Property | Description | Values |
|---|---|---|
| position | Defines the type of positioning for an element | absolute fixed relative static inherit |
| top | Sets the top margin for a positioned box | auto length % inherit |
| right | Sets the right margin for a positioned box | auto length % inherit |
| bottom | Sets the bottom margin for a positioned box | auto length % inherit |
| left | Sets the left margin for a positioned box | auto length % inherit |
| z-index | Sets the stacking order of an element | auto number inherit |
| clip | Clips an absolutely positioned element | auto shape inherit |
| overflow | Defines what happens if content overflows an element’s box | auto hidden scroll visible inherit |
| cursor | Defines the type of cursor to be displayed | auto url crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
Example:
A web page with a Fixed Header, and a Cover Picture area that collapse when Scrolling-up & re-appears when scrolling-down.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Fixed Header, Collapsing Cover, and Scroll-up Content</title> <link rel="stylesheet" type="text/css" href="positionexample.css"/> </head> <body> <div id="container"> <header> <h1>This is the Header</h1> </header> <div id="cover-pic"> <h2>This is Cover Picture area</h2> </div> <section> <p>here is all the content</p> </section> </div> </body> </html>
CSS
html, body, div, header, h1, h2, section, p {
margin: 0;
border: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
text-align: center;
}
#container {
width: 990px;
margin: 0 auto;
}
header {
width: 990px;
height: 100px;
background-color: #ababab;
position: fixed;
z-index: 10;
}
#cover-pic {
width: 990px;
height: 400px;
border: 5px solid black;
background-color: #ebebeb;
position: fixed;
top: 100px;
}
section {
width: 100%;
height: 1500px;
background-color: #707070;
color: white;
position: relative;
top: 500px;
}
Summary
Positioning in CSS is vital to know for the better web page formatting. There are 4 types of positioning e.g. Fixed, Static, Absolute, and Relative while 4 types of positioning properties e.g. left, top, right, and bottom. Positions can only be apply after setting the positioning to get the desired effect.
About Writer
Writer of this post is Mr. Sebbe Kurean who is a student of website designing and UI development course in our institute. He is a very dedicated student and skilled graphic design professional too and working in a company in Delhi.
