CSS properties - bottom

revision:

bottom property

- affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

If {position: absolute}; or {position: fixed;} : the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
If {position: relative;} : the bottom property makes the element's bottom edge to move above/below its normal position.
If {position: sticky;} : the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
If {position: static;} : the bottom property has no effect.

CSS syntax : bottom: auto | length | initial | inherit;

Property values

auto : lets the browser calculate the bottom edge position. This is default

length : sets the bottom edge position in px, cm, etc. Negative values are allowed

% : sets the bottom edge position in % of containing element. Negative values are allowed

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.bottom="10px"

example: bottom property

This div element has position: relative;
position: absolute and bottom 1vw
This div's bottom edge is placed 1vw above the bottom edge of the containing element.

This div element has position: relative;
position: relative and bottom 0.3vw
This div's bottom edge is placed 0.3vw above its normal position.

position: fixed and bottom 2vw
This div's bottom edge is placed 1vw from the bottom of the viewport.
This div element has position: relative;
position: sticky and bottom 1vw
This div is sticky.
code: 
                    <div>
                        <div class="parent">This div element has position: relative;
                            <div class="absolute"><strong>position: absolute and bottom 1vw</strong><br>
                            This div's bottom edge is placed 1vw above the bottom edge of the containing element.</div>
                        </div><br>
                        <div class="parent">This div element has position: relative;
                            <div class="relative"><strong>position: relative and bottom 0.3vw</strong><br>
                            This div's bottom edge is placed 0.3vw above its normal position.</div>
                        </div><br>
                        <div class="fixed"><strong>position: fixed and bottom 2vw</strong><br>
                        This div's bottom edge is placed 1vw from the bottom of the viewport.</div>
                        <div class="parent">This div element has position: relative;
                            <div class="sticky"><strong>position: sticky and bottom 1vw</strong><br>
                            This div is sticky.</div>
                        </div>
                        
                    </div>
                    <style>
                        div.parent {position: relative; height: 10vw; border: 0.3vw solid red;}
                        div.absolute {position: absolute; width: 50%; bottom: 1vw; border: 0.3vw solid #8AC007;} 
                        div.relative {position: relative; width: 50%; bottom: 0.3vw; border: 0.3vw solid #8AC007;} 
                        div.fixed {position: fixed; width: 40%; bottom: 2vw; border: 0.3vw solid #8AC007;} 
                        div.sticky {position: sticky; width: 50%; bottom: 1vw; border: 0.3vw solid #8AC007;} 
                    </style>