CSS - Positioning
CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.
Now, we will see all the CSS positioning related properties with examples
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for left.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for top.
NOTE You can use bottom or right values as well in the same way as top and left.
Here is the example
It will produce the following result
Absolute Positioning
An element with position: absolute is positioned at the specified coordinates relative to your screen top-left corner.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for left.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for top.
NOTE You can use bottom or right values as well in the same way as top and left.
Here is an example
Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window.
You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for left.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for top.
NOTE You can use bottom or right values as well in the same way as top and left.
Here is an example
Useful Video Courses
CSS Online Training
33 Lectures 2.5 hours
Anadi Sharma
CSS Web Development
26 Lectures 2.5 hours
Frahaan Hussain
2D Animation with CSS Animations - Complete course with real world projects
44 Lectures 4.5 hours
DigiFisk [Programming Is Fun]
Complete CSS Flexbox course & a real world website project
21 Lectures 2.5 hours
DigiFisk [Programming Is Fun]
2D Game Development with Javascript & CSS3- Create Memory Game
51 Lectures 7.5 hours
DigiFisk [Programming Is Fun]
CSS Grid - Build Modern Real World websites fast [+projects]
52 Lectures 4 hours
DigiFisk [Programming Is Fun]