Css Bottom property

Bottom property in CSS:

The bottom element property has the same function as that of top property, except that like the top property, it is used to set bottom position as opposed to following top position.

It is created to accept the position property as supportive.

Relative Positioning with Bottom:

                          
                            div {
                                position: relative;
                                bottom: 20px; /* Move 20 pixels up from its normal position */
                            }

The proposed example reserves 20 pixels within the class "abc" which normally flows the document.

Absolute Positioning with Bottom:

                          
                            div {
                                position: absolute;
                                bottom: 50px; /* Position 50 pixels up from the nearest positioned ancestor */
                            }

In this case, the div element is placed 50 pixels above an ancestor node who is itself near a fixed positioned element.

Fixed Positioning with Bottom:

                          
                            div {
                                position: fixed;
                                bottom: 0; /* Fixed to the bottom edge of the viewport */
                            }

The e.g, div the is positioned to is bottom point of the viewport. It will remain on its place, without changing its position, even if the page is scrolled.

Percentage Values:

                          
                            div {
                                position: relative;
                                bottom: 10%; /* Move 10% of the containing element's height up */
                            }

This portion relocates the div element 10% of its element's height which is vertical to its containing element up.

Negative Values:

                          
                            div {
                                position: relative;
                                bottom: -30px; /* Move 30 pixels down from its normal position */
                            }

Bottom value affects the element’s normal position, - bottom will move element downwards.

Combining with Other Properties:

                          
                            div {
                                position: absolute;
                                bottom: 50px;
                                left: 20px;
                            }

In this insetting, the bottom and the left properties are used to derive the element position from the bottom (50 pixels up) and from the right (20 pixels right of the nearest positioning ancestor).