Basic Box Properties

Question 1

I need to place a “positioned” element a specified distance from the bottom of an ancestral “positioned” element

Answer 1

For absolutely positioned elements, the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A “positioned” element is one whose position is anything except static.

For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position.

Note: If “position:static”, the bottom property has no effect.

bottom:
auto
length
initial | inherit;

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