CSS bottom Property

The bottom CSS Property allows you to change an element's vertical position. The bottom property is used to specify the value of an element's position relative to the bottom of the viewport.

If the position value is fixed or absolute, the element adjusts its bottom edge in relation to the bottom edge of its parent element or the block that it is held in.

If the position value is relative, the element is positioned relative to its current bottom edge.

If the position value is sticky, the element adjusts its relative position when it is inside the viewport and fixes its position when it is outside the viewport.

Syntax

bottom: auto | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .parent {
        position: relative;
        height: 100px;
        border: 2px solid #00ab55;
    }
    .absolute {
        position: absolute;
        width: 50%;
        bottom: 10px;
        border: 2px solid #ff4842;
    }
    .relative {
        position: relative;
        width: 50%;
        bottom: 10px;
        border: 2px solid #1890ff;
    }
    .fixed {
        position: fixed;
        width: 50%;
        bottom: 10px;
        border: 2px solid #ffc107;
    }
    .sticky {
        position: sticky;
        width: 50%;
        bottom: 20px;
        border: 2px solid #f2f3f5;
    }
</style>
</head>
<body>

<div class="parent">
    <div class="absolute">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
    </div>
</div>
<br><br>
<div class="parent">
    <div class="relative">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
    </div>
</div>
<br><br>
<div class="fixed">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</div>
<div class="parent">
    <div class="sticky">
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
    </div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
auto	Allows the browser to calculate the position of the bottom edge. This is the default setting.
length	Sets the bottom edge position in pixels, centimeters, and so on. Negative values are permitted. Learn more about length units.
%	Sets the position of the bottom edge in percentage of the containing element. Negative values are permitted.
initial	This property is set to its default value. Learn more about the beginning.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
bottom	1.0	1.0	1.0	5.0	6.0

border-width

box-decoration-break

CSS bottom Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us