Left, right, top and bottom
In this article we are going to learn about left, right, top and bottom properties, in css, how to position elements in html.
We learnt about css in general, text transform in css, text decoration in css, background image in css, background image repeat in css, background position in css, image style in css, image style in css, rgba in css and image alignment in css so, we will be focusing on left, right, top and bottom properties.
Left, right, top and bottom
These are Cascading Style Sheet properties used to position html elements, how far from the left, right, top or bottom an element should be placed.
Left
This is a css property used to control how far from the left an element should be placed in html.
Let us add an image element with 10px left property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.left-example {
position: relative;
left: 10px;
background: orange;
}
<style/>
</head>
<body>
<img class="left-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Right
This is a css property used to control how far from the right an element should be placed in html.
Let us add an image element with 5% right property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.right-example {
position: relative;
float: right;
right: 5%;
background: orange;
}
<style/>
</head>
<body>
<img class="right-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Top
This is a css property used to control how far from the top an element should be placed in html.
Let us add an image element with 1% top property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.top-example {
position: relative;
top: 1%;
background: orange;
}
<style/>
</head>
<body>
<img class="top-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.
Bottom
This is a css property used to control how far from the bottom an element should be placed in html.
Let us add an image element with -0.5% bottom property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.bottom-example {
position: relative;
bottom: -0.5%;
background: orange;
}
<style/>
</head>
<body>
<img class="bottom-example" src="images/icon.png" alt="scienceinlesotho icon">
</body>
</html>
So, we should have the following results.