CSS bottom Property
The bottom CSS Property allows the vertical position of an element to be altered. The bottom property is used to set the value of the position of an element from the bottom of the viewport.
- 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: All the properties are described well with the example below.
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.
Syntax:
bottom: auto;
Example: This example illustrates the use of the bottom property whose value is set to auto.
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:
Length: It sets the bottom edge position in px, cm also negative values are allowed.
Syntax:
bottom: 5px;
Example: This example illustrates the use of the bottom property where property value is assigned as px.
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:
Percentage: It sets the bottom edge position in % of the containing element. It accepts the negative values.
Syntax:
bottom: 10%;
Example: This example illustrates the use of the bottom property whose value is assigned as a percentage.
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:
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.
Syntax:
bottom: initial;
Example: This example illustrates the use of the bottom property whose value is set to its default value.
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:
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.
Syntax:
bottom: inherit;
Example: This example illustrates the use of the bottom property whose value is set to inherit.
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
Please Login to comment...