RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/bottom below:

bottom · WebPlatform Docs

bottom Summary

Sets the position of the bottom edge of an element.

Overview table

Initial value: auto
Applies to: All elements
Inherited: No
Media: visual
Computed value: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto’.
Animatable: Yes
CSS Object Model Property: bottom

Syntax

bottom: auto
bottom: length
bottom: percentage

Values

auto: Default. Default position, according to the regular HTML layout of the page.
length: Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.
percentage: Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.

Examples

We demonstrate the `bottom` property by positioning these elements.

.container {
  
  position: relative;
}

.absolutely-positioned-within-container {
  
  position: absolute;
  
  bottom: 50px;
}

.absolutely-positioned-within-body {
  
  position: absolute;
  
  bottom: 100px;
}

.relatively-positioned {
  
  position: relative;
  
  bottom: 20px;
}

View live example

The HTML for the above example.



<article>
  <div class="container">
    <p class="box absolutely-positioned-within-container">Absolutely positioned within <code>div.container</code> at 50px above the bottom edge.</p>
    <p class="box relatively-positioned">This is relatively positioned at 20px from the bottom.</p>
  </div>

  <p class="box absolutely-positioned-within-body">This is absolutely positioned within the <code>body</code> at 50px above the bottom edge.</p>
</article>

Related specifications

CSS 2.1, Visual formatting model: W3C Recommendation