CSS bottom property is used to set the bottom position of a positioned element. It specifies the distance between the bottom edge of the element and the bottom edge of its containing element. Based on the value of the position property, the effect of bottom property, is determined.
Syntax
bottom: auto | length | percentage | initial | inherit;
Property Values
| Value | Description |
|---|---|
| auto | It lets the browser calculate the element’s bottom edge position. Default. |
| length | It sets the element’s bottom edge position in length units (eg.10px, 20px etc.). Negative value are valid. |
| percentage | It sets the element’s bottom edge position in percentage of containing element(e.g. 10%, 20% etc.). Negative values are valid. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from the parent element. |
Examples of CSS Border Property
The following examples explain the bottom property with different values.
Bottom Property with Absolute Position
To use bottom property with absolute position, the element must be contained within a parent which itelf should be positioned. The element will then be placed relative to the parent. The distance from the bottom of the parent container edge can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style></style></head><body><h2>.container { position: relative; background-color: lightgray; height: 400px; } .boxes{ position: absolute; border: 3px solid black; padding: 10px; width: 20%; } .box { bottom: 150px; background-color: lightcoral; } .box2{ bottom: 10%; background-color: lightgreen; } .box3{ bottom: auto; background-color: lightblue; }</h2><p>CSS bottom property</p><p>Position: Absolute, the absolute position places the element relative to its positioned parent element.</p><div class="container"><div class=" boxes box">For all the boxes, the parent is the grey container with 'relative' position, so it they have been placed at 10%, 150px and auto from the bottom edge of their parent.Position: Absolute, bottom: 150px </div><div class=" boxes box2"> Position: Absolute, bottom: 10% </div><div class="boxes box3"> Position: Absolute, bottom: auto </div></div></body></html></pre>Bottom Property with Relative Position
When the bottom property is used with relative position, the element will be placed relative to its normal position. The distance from the bottom of its normal position can be specified in length or percentage values (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { position: relative; background-color: lightgray; height: 300px; }.boxes { position: relative; border: 3px solid black; padding: 10px; width: 20%; }.box { bottom: auto; background-color: lightcoral; }.box2 { bottom: 55%; background-color: lightgreen; }</style></head><body><h2>.box3 { bottom: 25px; background-color: lightblue; }</h2><p>CSS bottom property</p><p>Position: Relative, the relative position places the element relative to its normal position.</p><br/><br/><br/><br/><div class="container"><div class=" boxes box">For all the boxes, the parent is the grey container with 'relative' position, so they have been placed at 25px, auto and 55% from their normal positions.Position: Relative, bottom: auto </div><div class=" boxes box2"> Position: Relative, bottom: 55% </div><div class="boxes box3"> Position: Relative, bottom: 25px </div></div></body></html></pre>Bottom Property with Fixed Position
The fixed position places an element at a specific position, the element stays at the position despite scroll. The position of the element from the bottom can be specified in length or percentage (e.g. 10px, 20% etc.) or auto value. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { position: relative; background-color: lightgray; height: 700px; }.boxes { position: fixed; border: 3px solid black; padding: 10px; width: 20%; }.box { bottom: auto; background-color: lightcoral; }.box2 { bottom: 75px; background-color: lightgreen; }</style></head><body><h2>.box3 { bottom: 2%; background-color: lightblue; }</h2><p>CSS bottom property</p><p>Position: Fixed, the fixed position places the element at a fixed position even during a scroll.</p><div class="container"><div class=" boxes box">For all the boxes, the parent is the grey container with 'relative' position, so they have been placed at auto, 75px and 2% from the parent's bottom edge.Position: Fixed, bottom: auto </div><div class=" boxes box2"> Position: Fixed, bottom: 75px </div><div class="boxes box3"> Position: Fixed, bottom: 2% </div></div></body></html></pre>Bottom Property with Sticky Position
The sticky position keeps an element fixed relative to its container when scrolling past a specified point. With the bottom property, we can control the distance from the containers bottom edge. Values like auto, 10px, or 10% adjust its sticking behavior accordingly. This is shown in the following example.
Example
<!DOCTYPE html><html><head><style>.container { position: relative; background-color: lightgray; height: 100vh; }.boxes { position: sticky; border: 3px solid black; padding: 10px; width: 20%; }.box { bottom: auto; background-color: lightcoral; }.box2 { bottom: 10px; background-color: lightgreen; }</style></head><body><h2>.box3 { bottom: 10%; background-color: lightblue; }</h2><p>CSS Bottom Property with Sticky Position</p><p>Position: Sticky, the bottom property affects how the element sticks to its container's bottom edge.</p><div class="container"><div class="boxes box">The parent container has a height of 700px, so the sticky elements are positioned at auto, 10px, and 10% from the container's bottom edge.Position: Sticky, bottom: auto </div><div class="boxes box2"> Position: Sticky, bottom: 10px </div><div class="boxes box3"> Position: Sticky, bottom: 10% </div></div></body></html></pre>
Leave a Reply