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 .If you use this property along with flex you can get the most out of it.
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 5 different positioning values but only one is active for an element at a time you can’t use two position properties at once.
position:static;position:relative;position:fixed;position:absolute;position:sticky;
position:static;
It is the default value of all the elements in HTML and this is the only property value that does not work with top, right, bottom ,and left properties. The element with static positioning retains its original place in the web page hierarchy.
position:fixed;
As the name suggests if you want an element to never change its position even if the page is scrolled then use this property. The element is placed with use of other 4 property i.e., top, right, bottom, and left.
Example:
div.logo {
position: fixed;
top: 10px;
left: 15px;
}
position:relative;
It is the one of the most used values but remember its usage is a bit tricky and using this property value to relocate any element is not advised. Reason is pretty simple: if you move the element using it, this will cause the element to leave the blank space to the point of the new positioning value and filling the space is not possible.
This property works best with a parent child relationship. We’ll see how in a bit
Example:
h1.move-left {
position: relative;
left: -30px;
}
h1.move-right {
position: relative;
left: 50px;
}
Example:
div.move-up {
position: relative;
top: -40px;
}
position:absolute;
The most commonly used positioning property with relation to the parent element having position:relative; property. First thing if position relative is not given to any parent element then the document body becomes the parent.
The element with the property can be placed anywhere inside that element by using the same four properties to place but using display:flex; to align or place the element is better since you don’t have to worry about the responsive part.
Example:
div.item-title {
position: absolute;
top: 200px;
left: 170px;
}
position:sticky;
This property is used for making the element fixed only when the page is scrolled to a particular offset. This positioning property is used for making navigation fixed at the top when it also has a top bar above it.
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.
