CSS Properties Index   Positioning Properties

---

Sets or retrieves the bottom position of an object.

CSS	{ bottom: auto | length | percentage }
Script	object.style.bottom = auto | length | percentage

auto	Default position according to the HTML layout of the page.
length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s height.

The property is read/write with a default value of auto; this attribute is not inherited.

The bottom property participates in setting the vertical position of a positioned element.

The effect of bottom depends on how the element is positioned ( the value set for the position property )

• When position is set to absolute or fixed, the bottom property specifies the distance between the outer edge of the element’s bottom margin and the outer edge of the containing block’s bottom padding.
• When position is set to relative, the bottom property specifies the distance the element’s bottom edge is moved. A positive value moves it upward. A negative value moves it downward.
• When position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle.
• When position is set to static, the bottom property has no effect.

Its returned value corresponds to the offsetBottom property of the object and does not include the border of the parent object.

When scripting the bottom property, use either the pixelBottom or posBottom property for numeric manipulation of a bottom value.

For more information about how to access the dimension and location of objects on the page through the document object model, see Measuring Element Dimension and Location.

The sample below uses inline event handlers to dynamically change an object’s bottom property in response to mouse events. A transition is applied to illustrate the change in position.

<img id="img" src="../shared/images/someImage.jpg" 
   style="position: relative; bottom: 0px" 
   onclick="this.style.bottom='-200px'" 
   ondblclick="this.style.bottom='0px'">

 Show me 

left, right, top, pixelBottom, posBottom