bottom Archives - Lena Design

The CSS bottom property works on the vertical position of a positioned element. The CSS bottom property has no effect on non-positioned elements.

Syntax:

bottom: auto|length;

auto (default) – lets the browser calculate the bottom edge position.

length – settles the bottom edge position in px, cm, %, etc.

Example:

<!doctype html>
<html>
<head>
<style>
   .frame {
        border: 3px solid #333;
    }
  .one, .two, .three {
    width: 100px;
    height: 50px;
    position: relative;
    background-color: #e9c46a;
    display: inline-block;
    }
    
    .one {
        bottom: 0px;
    }
    
   .two {
        bottom:10px;
    }
    
    .three {
        bottom: -10px;
    }
    
</style>
</head>

<body>
    <div class="frame">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    </div>
</body>
</html>

Output:

Enjoy coding!