Discover the power of the CSS Bottom Property, a versatile tool that modifies an element’s vertical position. This property is instrumental in defining the distance of an element from the viewport’s bottom, offering precise control over your webpage layout.
- If the position value is fixed or absolute, then the element adjusts its bottom edge with respect to the bottom edge of its parent element or the block that holds it.
- If the position value is relative then the element is positioned with respect to its own current bottom edge.
- If the position value is sticky then the element adjusts the position which is relative when the element is inside the viewport & its position will be fixed it is outside of the viewport.
- If the position value is static then the element does not have any effect due to the bottom property.
Syntax:
bottom: auto| length| %| initial| inherit;Property values:
- auto: This is the default value of the bottom property. It sets the bottom property based on the browser ie., the browser will decide the bottom edge position.
- Length: It sets the bottom edge position in px, cm also negative values are allowed.
- Percentage: It sets the bottom edge position in % of the containing element. It accepts the negative values.
- initial: Itis used to set an element’s CSS property to its default value. The initial keyword can be used for any CSS property, and on any HTML element.
- inherit: It is used to inherit a property to an element from its parent element property value. The inherit keyword can be used for inheriting any CSS property, and on any HTML element.
Methods to use CSS Bottom Property
1. Using bottom property value as auto:
Example: This example illustrates the use of the bottom property whose value is set to auto.
<!DOCTYPE html>
<html>
<head>
<title> Bottom Property</title>
</head>
<body>
<h1 style="color:darkgreen;">GeeksforGeeks</h1>
<p style="position: fixed;
bottom: auto;">
This line will be auto adjusted for
bottom based on the browser.
</p>
</body>
</html>
Output:
2. Using bottom property value in pixels:
Example: This example illustrates the use of the bottom property where the property value is assigned as px.
<!DOCTYPE html>
<html>
<head>
<title> Bottom Property</title>
</head>
<body>
<h1 style="color:darkgreen;">GeeksforGeeks</h1>
<p style="position: fixed;
bottom: 50px;">
This line will be adjusted for bottom based
on the length provided, i.e. 50px.
</p>
<p style="position: fixed;
bottom: -15px;">
This line will be adjusted for bottom based
on the length provided, i.e. -15px.
</p>
</body>
</html>
Output:
3. Using bottom property value in Percentage:
Example: This example illustrates the use of the bottom property whose value is assigned as a percentage.
<!DOCTYPE html>
<html>
<head>
<title> Bottom Property</title>
</head>
<body>
<h1 style="color:darkgreen;">GeeksforGeeks</h1>
<p style="position:
fixed; bottom: 10%;">
This line will be adjusted for bottom based
on the percentage provided, i.e. 10%.
</p>
<p style="position:
fixed; bottom: -5%;">
This line will be adjusted for bottom based
on the percentage provided, i.e. -5%.
</p>
</body>
</html>
Output:
4. Using bottom property value initial:
Example: This example illustrates the use of the bottom property whose value is set to its default value.
<!DOCTYPE html>
<html>
<head>
<title> Bottom </title>
</head>
<body>
<h1 style="color:darkgreen;">GeeksforGeeks</h1>
<p style="position: fixed;
bottom: initial;">
This line will be adjusted for bottom based
on the initial value of the browser.
</p>
</body>
</html>
Output:
5. Using bottom property value inherit:
Example: This example illustrates the use of the bottom property whose value is set to inherit.
<!DOCTYPE html>
<html>
<head>
<title> Bottom </title>
</head>
<body>
<h1 style="color:darkgreen;">GeeksforGeeks</h1>
<p style="position: fixed;
bottom: inherit;">
This line will inherit the position
from the parent element.
</p>
</body>
</html>
Output:
Supported Browser:
- Google Chrome 1.0
- Internet Explorer 5.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 6.0
- Safari 1.0