The CSS bottom property is a powerful tool for vertical positioning. It works in conjunction with the position property (relative, absolute, fixed, or sticky) to define the vertical offset of an element from the bottom edge of its containing block or the viewport. Understanding how to control the bottom property is fundamental for creating layouts like sticky footers and precisely placed UI elements.
Example 1: Relative Positioning
/* style.css */
.relative-box {
position: relative; /* Establishes a positioning context */
bottom: 20px; /* Moves the element 20px UP from its original position */
background-color: #f0ad4e;
padding: 10px;
}
Explanation
When an element's position is set to relative, the bottom property moves it upward from its normal position in the document flow. This is useful for making minor spatial adjustments without affecting the layout of other elements.
Example 2: Absolute Positioning
/* style.css */
.parent-container {
position: relative; /* Creates a positioning context for the child */
height: 200px;
border: 2px solid #337ab7;
}
.absolute-child {
position: absolute; /* Positions the element relative to .parent-container */
bottom: 0; /* Aligns the element to the bottom edge of the parent */
left: 0;
width: 100%;
background-color: #5bc0de;
padding: 10px;
}
Explanation
An absolutely positioned element is removed from the normal flow and positioned relative to its nearest positioned ancestor. Here, bottom: 0; anchors the child element directly to the bottom of its parent container.
Example 3: Fixed Positioning Footer
/* style.css */
.fixed-footer {
position: fixed; /* Positions the element relative to the browser window */
bottom: 0; /* Sticks the element to the bottom of the viewport */
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 15px 0;
}
Explanation
The position: fixed; value pairs with bottom: 0; to create a "sticky footer." This element stays locked to the bottom of the browser viewport, regardless of how the user scrolls the page.
Example 4: Sticky Positioning
/* style.css */
.sticky-element {
position: sticky; /* Element sticks when it hits a threshold */
bottom: 0; /* Sticks to the bottom of its container when scrolling */
background-color: #5cb85c;
padding: 10px;
border: 1px solid #4cae4c;
}
Explanation
A sticky element toggles between relative and fixed positioning. It scrolls with the page until it reaches the offset defined by bottom: 0;, at which point it "sticks" to the bottom of its parent container.
Example 5: Negative Bottom Value
/* style.css */
.container {
position: relative;
height: 150px;
border: 2px solid #ccc;
overflow: hidden; /* Hides the part of the box that is outside */
}
.outside-box {
position: absolute;
bottom: -20px; /* Positions the element 20px below its container's bottom edge */
left: 10px;
width: 90%;
background-color: #d9534f;
padding: 10px;
}
Explanation
Using a negative value for the bottom property pushes the element outside of its containing block. This can be used for creative overlapping effects where an element appears to hang off its parent.
Example 6: Percentage-Based Bottom Value
/* style.css */
.parent-div {
position: relative;
height: 300px; /* The percentage is based on this height */
border: 2px solid #0275d8;
}
.percent-box {
position: absolute;
bottom: 10%; /* 10% of the parent's height (30px) from the bottom */
left: 20px;
background-color: #f7f7f7;
padding: 10px;
border: 1px solid #ccc;
}
Explanation
When using a percentage for the bottom property, the value is calculated based on the height of the positioned element's containing block. This allows for responsive positioning that adapts to the parent's size.
Example 7: Bottom with CSS Calc()
/* style.css */
.dynamic-container {
position: relative;
height: 250px;
border: 2px dashed #663399;
}
.calc-box {
position: absolute;
bottom: calc(10% + 10px); /* Mixes percentage and pixel units */
right: 15px;
background-color: #ffc107;
padding: 12px;
}
Explanation
The calc() function allows you to perform calculations to determine a property value. Here, it positions the element by taking 10% of the parent's height and then moving it an additional 10px up from the bottom.