CSS positioning
CSS Positioning
CSS helps you position HTML elements. You can position any HTML element anywhere. You can specify whether you want the element to be positioned relative to its natural position on the page or relative to its parent element.
Now, we will see all the CSS positioning related properties and their examples.
Relative Positioning
Relative positioning changes the position of an HTML element relative to its normal display position. So “left:20” will add 20 pixels to the left side of the element.
You can use two values top and left and position The property moves an HTML element to any position in the HTML document.
- Move to the left – use a negative value of `left`.
- Move to the right – use a positive value of `left`.
- Move up – use a negative value of `top`.
- Move down – use a positive value of `top`.
Note − You can also use `bottom` or `right` values in the same way as `top` and `left`.
This is an example −
<html>
<head>
</head>
<body>
<div style = " **position:relative; left:80px; top:2px;** background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>
It will produce the following result −
Absolute Positioning
Elements with position: absolute will be positioned relative to the specified coordinates of the top-left corner of the screen.
You can use the two values top and left with the position property to move an HTML element to any position in an HTML document.
- Move to the 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 also use the bottom or right values as with top and left above.
This is an example−
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
Output:
Fixed Positioning
Fixed positioning allows you to fix the position of an element at a specific location on the page, regardless of scrolling. The specified coordinates will be relative to the browser window.
You can use two values top and left and position properties to move HTML elements anywhere in an HTML document.
- Move left – use a negative value of left .
- Move right – use a positive value of left .
- Move up – use a negative value of top .
- Move down – use a positive value of top .
Note – You can also use the bottom or right values just as you can with top and left .
This is an example –
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
Output:
