In this chapter you will learn:
What is bottom property?
Example of bottom property
CSS bottom property is used for positioning an element or tag from the bottom and helps to get absolute position of the positioned element. It also specifies the edge of an element from bottom margin edge and its containing block. You can set the value of bottom property in px, em, %, auto and inherit. You can use this property if you want to set the element to the exact position from the bottom but the condition is, the element must be absolute positioned.
Example of bottom property:-Example 1.
<html>
<head>
<styletype="text/css">
img
{ position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<imgsrc="roze.jpg" alt="example ofbottom property"/>
</body>
</html>Guide:-
In this example, image is positioned from bottom margin 0 (Zero) px.
Output:-
Example 2.
<html>
<head>
<styletype="text/css">
img
{ position:absolute;
bottom:200px;
}
</style>
</head>
<body>
<imgsrc="roze.jpg" alt="example ofbottom property"/>
</body>
</html>Guide:-
In this example, the image is positioned 200 px from the bottom.
Output:-
Summary
In this chapter, you have learned about CSS bottom property and its use with an example so now you can try to use this property according to your requirement. Click on the next button to continue-