totn CSS

CSS: bottom property

This CSS tutorial explains how to use the CSS property called bottom with syntax and examples.

Description

The CSS bottom property defines the bottom position of an element in combination with the position property.

Syntax

The syntax for the bottom CSS property is:

bottom: value;

Parameters or Arguments

value

The bottom value when positioning an element using the position property. It can be one of the following:

Value Description
fixed Fixed value expressed in pixels, em's, etc.
div { position: relative; bottom: 8px; }
div { position: absolute; bottom: 4em; }
percentage Percentage value
div { position: fixed; bottom: 10%; }
auto This is the default behavior
div { position: relative; bottom: auto; }
inherit Indicates that the element will inherit the bottom from its parent element
div { position: inherit; }

Note

  • When the value is provided as a percentage, it is relative to the height of the containing block.
  • If the position property is set to relative, absolute, or fixed, you can set the bottom, right, bottom, and left properties.
  • If the position property is set to static, he bottom, right, bottom, and left properties do not apply.
  • See also the position, top, right, and left properties.

Browser Compatibility

The CSS bottom property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
    • static, relative, absolute: IE 4
    • fixed: IE 7
  • Opera
  • Safari (WebKit)

Example

We will discuss the bottom property below, exploring examples of how to use this property in CSS.

Relative Position

Let's look at an example where we set the position property to relative and set a value for the bottom property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: relative; bottom: 5px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of relative and the bottom property is set to 5px. What this means is that the div element (identified by the totn2 class) will be moved up from the bottom by 5px relative to where it would have been positioned in a normal layout.

Absolute Position

Let's take a look at what would happen if we tried setting the position property to absolute for the second div and set a value for the bottom property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: absolute; bottom: 5px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of absolute and the bottom property is set to 5px. What this means is that the div element (identified by the totn2 class) will be moved within its parent container to an absolute position of 5px from the bottom of the container.

So in this example, the second div in effect is positioned on top of the first div (identified by the totn1 class).

Fixed Position

Let's take a look at what would happen if we tried setting the position property to fixed for the second div and set a value for the bottom property.

The CSS would look like this:

.totn_container { background: red; padding: 10px; width: 360px; height: 40px; }

.totn1, .totn2, .totn3 { float: left; background: lightgreen; border: 2px solid blue; width: 115px; }

.totn2 { position: fixed; bottom: 5px; }

The HTML would look like this:

<div class="totn_container">
  <div class="totn1">Div 1 - techonthenet.com</div>
  <div class="totn2">Div 2 - techonthenet.com</div>
  <div class="totn3">Div 3 - techonthenet.com</div>
</div>

The result would look like this:

CSS

In this CSS position example, we have set the totn2 class to have a position of fixed and the bottom property is set to 5px. What this means is that the div element (identified by the totn2 class) will be moved within the screen's viewport to a fixed position of 5px from the bottom of the viewport.

It looks very similar to the result from the absolute position example. The only exception is that when we scroll with the fixed position example, the second div (identified by the totn2 class) will remain fixed within the screen's viewport and will not scroll off of the screen.

Share on: