CSS – Positioning
CSS – Positioning
To position a HTML element in top, down, left and right in respect of the screen of the page, this property is used. The positioning of elements in CSS can be categorized as,
Relative: The position of the HTML element can be changed in respect of its normal position.
Absolute: The HTML element can be positioned at the specific coordinates relative to screen’s top-left position.
Fixed: The HTML elements are fixed in particular portion of the page regardless of scrolling.
The top and left values are used with the above properties to position the element in respective position.
Moving left: It requires negative values for left like left:-2px
Moving right: It requires positive values for left like left:40 px
Moving up: It requires negative values for top like top:-2px
Moving right: It requires positive values for top like top:80 px
Example:
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:-2px; background-color:yellow;">
This div has relative positioning.
</div>
<div style = "position:absolute; left:-2px; top:80px; background-color:yellow;">
This div has absolute positioning.
</div>
<div style = "position:fixed; left:100px; top:40px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
Output: