RetroSearch Browse

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

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

left · WebPlatform Docs

left Summary

Sets the left 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: left

Syntax

left: auto
left: length
left: 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 width of the parent object.

Examples

We demonstrate the `left` property by positioning the elements.

.container {
  
  position: relative;
}

.absolutely-positioned-within-container {
  
  position: absolute;
  
  left: 25px;
}

.absolutely-positioned-within-body {
  
  position: absolute;
  
  left: 350px;
}

.relatively-positioned {
  
  position: relative;
  
  left: 300px;
}

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 25px from the left.</p>
    <p class="box relatively-positioned">This is relatively positioned at 300px from the left.</p>
  </div>

  <p class="box absolutely-positioned-within-body">This is absolutely positioned within the <code>body</code> at 350px from the left.</p>
</article>