CSS bottom Property
The CSS bottom property affects the vertical position of a positioned element. This property does not affect non-positioned elements. It controls an element’s vertical distance from the bottom edge of its containing element using units like pixels, percentages, or keywords (auto, initial, inherit).
CSS bottom Property Usage
Position and bottom Property Description are
- absolute/fixed: Sets the bottom relative to the nearest positioned ancestor.
- relative: Moves the bottom relative to its normal position.
- sticky: Acts as relative inside the viewport, fixed outside.
- static: The bottom property has no effect.
Syntax
bottom: auto| length| %| initial| inherit;Property values
| Value | Description |
|---|---|
| auto | Default value; browser determines the bottom edge position. |
| Length | Sets the bottom edge position in pixels (px), centimeters (cm), or negative values are allowed. |
| Percentage | Sets the bottom edge position as a percentage of the containing element, including negative values. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property value from its parent element. |
1. Using bottom property value as auto
Using the bottom property value as auto allows the browser to automatically determine the element’s position from the bottom.
Example: This example the paragraph below uses fixed positioning with bottom set to auto, allowing the browser to adjust its position dynamically.
<!DOCTYPE html>
<html>
<head>
<title>CSS 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
Using the bottom property value in pixels sets the element’s position a specific distance (in px) from the bottom edge.
Example: This example we have two paragraphs in which we use fixed positioning with the bottom property set to 50px and -15px respectively, adjusting their positions accordingly.
<!DOCTYPE html>
<html>
<head>
<title>CSS 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
Using the bottom property value in percentage sets the element’s position relative to a percentage of the containing element’s height.
Example: This example we use fixed positioning with bottom values set as percentages: 10% and -5%, adjusting their positions accordingly.
<!DOCTYPE html>
<html>
<head>
<title>CSS 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
Using the bottom property value initial sets the element’s position to its default value, as defined by the browser.
Example: This example in paragraph we use fixed positioning with the bottom property set to “initial”, adjusting its position based on the browser’s default behavior.
<!DOCTYPE html>
<html>
<head>
<title>CSS Bottom Property</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
Using the bottom property value inherit makes the element inherit its bottom position from the bottom value of its parent element.
Example: This example in paragraph uses fixed positioning with the bottom property set to “inherit”, inheriting its position from the parent element.
<!DOCTYPE html>
<html>
<head>
<title>CSS Bottom Property</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 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1
CSS bottom Property – FAQs
What does the bottom property do in CSS?
The bottom property in CSS specifies the vertical position of an element in relation to its nearest positioned ancestor. It moves the element from the bottom edge of its container.
How is the bottom property used with position absolute?
When an element has position: absolute or position: fixed, the bottom property moves the element relative to the bottom of its containing block. For example: bottom: 20px; moves the element 20px above the bottom edge of its container.
Can the bottom property be used with position: relative?
Yes, when used with position: relative, the bottom property moves the element upward from its normal position within the document flow.
What happens if the bottom value is negative?
A negative bottom value moves the element further below its reference point, essentially moving it outside its container.
Does the bottom property work with position: static?
No, the bottom property has no effect if the element is positioned statically. It only works with positioned elements (relative, absolute, fixed, or sticky).
