Hello Web design tutorialz readers! morning to you all. Welcome to a new section of my tutorials on CSS. Before i continue i want to first apologize to you guys for not droping any tutorial post since last month, was very busy with other stuffs.
Am going to continue from where i stoped, in my last tutorial on CSS i talked about visibility and i showed you guys how it works. Now in this tutorial am going to be talking about Positioning in CSS. Without wasting much time, lets go down to business
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 lets take a look at all the Css positioning related properties with proper examples.
You can also read our tutorial post on: Css Visibility
Relative Positioning
Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:30" adds 30 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move a HTML element any where in a HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for right.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for down.
NOTE: You can use the bottom or right values as well in same way as top and left.
Below is a short example:
<html>
<head>
</head>
<body>
<div style="position: relative; left: 70px; top: 4px; background-color: red;">
This div element has a relative positioning.
</div>
</body>
</html>
<head>
</head>
<body>
<div style="position: relative; left: 70px; top: 4px; background-color: red;">
This div element has a relative positioning.
</div>
</body>
</html>
You can also read our tutorial post on: Css Dimensions
Absolute Positioning
An element with absolute position 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 a HTML element any where in a HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for right.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for down.
NOTE: You can use the bottom or right values as well in same way as top and left.
Below is a short example:
<html>
<head>
</head>
<body>
<div style="position: absolute; left: 70px; top: 15px; background-color: red;">
This div element has an absolute positioning.
</div>
</body>
</html>
<head>
</head>
<body>
<div style="position: absolute; left: 70px; top: 15px; background-color: red;">
This div element has an absolute positioning.
</div>
</body>
</html>
You can also read our tutorial post on: Scrollbar Css
Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on the HTML 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 a HTML element any where in a HTML document.
- Move Left - Use a negative value for left.
- Move Right - Use a positive value for right.
- Move Up - Use a negative value for top.
- Move Down - Use a positive value for down.
NOTE: You can use the bottom or right values as well in same way as top and left.
Below is a short example:
<html>
<head>
</head>
<body>
<div style="position: fixed; left: 70px; top: 15px; background-color: red;">
This div element has a fixed positioning.
</div>
</body>
</html>
<head>
</head>
<body>
<div style="position: fixed; left: 70px; top: 15px; background-color: red;">
This div element has a fixed positioning.
</div>
</body>
</html>
For those of you that are from the none English speaking countries, you can easily translate the original language of this tutorial to any other language of your choice by using the google translate tool which is available at the side bar of this web site.
Alright guys, we have come to the end of this tutorial on CSS postioning. Feel free to ask your questions in any area you don't understand properly, and your questions will be attended to as soon as possible.
Like our facebook page and subscribe with us to get our tutorial posts delivered directly to your emails. Also share this tutorial post on the various social media platforms available.