bottom

Definition

In CSS, the bottom property is used to set the position of an element along the vertical axis. It specifies the distance between the bottom edge of an element and the bottom of its containing block. The value of the bottom property can be a length in units such as pixels (px) or ems (em), or it can be set to a percentage of the containing block's height.

Examples

This will position the footer element at the bottom of the viewport and will always be visible regardless of the scrolling position:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

This will position the navigation bar at the bottom of the viewport, and it will be always visible regardless of scrolling position:

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Positioning an element 10px from the bottom of a container:

.example {
  position: absolute;
  bottom: 10px;
  left: 0;
}

This will position the element 20% of the height of its containing block from the bottom of the container:

.example {
  position: absolute;
  bottom: 20%;
  right: 0;
}

This will position the button 20px from the bottom and 20px from the right corner of the viewport:

.example {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Values

Best Practices

• Use it in conjunction with other positioning properties: The bottom property is often used in conjunction with other positioning properties, such as top, left, and right, to determine the final position of an element. Be sure to use these properties together to achieve the desired positioning effect.
• Use bottom: auto when working with responsive design: The auto value for the bottom property is useful when working with responsive design, as it allows the browser to automatically calculate the value based on the size of the containing block.
• Consider accessibility: Be mindful of accessibility when using the bottom property to position elements, as fixed positioning can make it difficult for users with motor impairments to interact with the content.
• Test it: Always test your design on different devices and screen sizes to make sure that the elements positioned with the bottom property display correctly and that the design is accessible for all users.
• Use it in combination with media queries: Use media queries to adjust the value of the bottom property based on the screen size and device. This will help you to create responsive designs that look and work great on all devices.
• Avoid negative values: Keep in mind that negative values for the bottom property are not allowed and that it can cause unexpected results.
• Be mindful of the context: Be aware of the context of the element you are positioning with the bottom property. Some elements, like input fields or buttons, need to be easily clickable, so positioning them too close to the bottom may cause usability issues.
• Use it with caution: The bottom property is a powerful tool, but it should be used with caution. Use it in the right context and test it to ensure that it works as intended and does not cause any layout or accessibility issues. Be mindful of other layout properties: It's important to consider other layout properties such as width, height, and overflow when using the bottom property. For example, if you set the bottom property to 0 and the overflow property to hidden, it may cause some content to be hidden and not visible to the user.
• Use it to create sticky elements: The bottom property is useful to create sticky elements such as footers, navigation bars, and even some buttons. This can help to keep important information visible to the user at all times.
• Use it with proper parent element: The bottom property works in relation to its parent element, so be sure to set the proper parent element to the element that you want to position with the bottom property.

Browser Compatibility

• Internet Explorer 8 and earlier versions do not support the bottom property. To ensure that elements positioned with the bottom property display correctly in older versions of Internet Explorer, you can use a JavaScript library such as CSS3PIE.