- Services
- Case Studies
- Technologies
- NextJs development
- Flutter development
- NodeJs development
- ReactJs development
- About
- Contact
- Tools
- Blogs
- FAQ
CSS Left Master Horizontal Positioning in Web Design
Explore length, percentage, auto, and global values available.

Introduction
The left
CSS property is essential for web development and design. It helps you control the horizontal position of elements that have been positioned using the position
property. This property is crucial for creating precise layouts and visually appealing designs.
Syntax
The syntax for the left
property is simple:
left: value;
Value Types:
- Length Values:
- Use specific units like pixels (
px
), ems (em
), or centimeters (cm
).
left: 3px;left: 2.4em; - Use specific units like pixels (
- Percentage Values:
- Specify the position as a percentage of the containing block’s width.
left: 10%; - Keyword Value:
- The
auto
keyword lets the browser determine the position.
left: auto; - The
- Global Values:
- Use keywords like
initial
,inherit
,revert
,revert-layer
, andunset
.
left: inherit;left: initial; - Use keywords like
Description
The behavior of the left
property depends on how the element is positioned, which is determined by the position
property. Here’s how it works with different positioning values:
Absolute Positioning
When position
is absolute
, the left
property specifies the distance between the element’s left edge and the left edge of its containing block.
Relative Positioning
When position
is relative
, the left
property specifies how far the element is moved to the right from its normal position.
Fixed Positioning
When position
is fixed
, the left
property specifies the distance between the element’s left edge and the left edge of the viewport.
Sticky Positioning
When position
is sticky
, the left
property is used to compute the sticky-constraint rectangle.
Static Positioning
When position
is static
, the left
property has no effect.
Formal Definition
The left
property has specific initial values, applicability, inheritance, and animation types:
Initial Value
- Initial Value:
auto
- The default is
auto
, meaning the browser determines the horizontal position.
- The default is
Applies To
- Applies To: Positioned elements
- Only works with elements that have been positioned using the
position
property.
- Only works with elements that have been positioned using the
Inherited
- Inherited: No
- The
left
property is not inherited from the parent element.
- The
Percentages
- Percentages: Refer to the width of the containing block
- When using percentages, they are calculated based on the width of the containing block.
Computed Value
- Computed Value:
- If specified as a length, the computed value is the corresponding absolute length.
- If specified as a percentage, the computed value is the specified percentage.
- Otherwise, the computed value is
auto
.
Animation Type
- Animation Type: Length, percentage, or
calc()
- The
left
property can be animated using length, percentage, or thecalc()
function.
- The
Formal Syntax
The formal syntax of the left
property is:
left: auto | <length-percentage>;
Components of the Syntax
auto
- Lets the browser determine the position.
left: auto;<length-percentage>
- Represents either a length value or a percentage value.
left: 3px;left: 10%;
Examples
Here are some practical examples to illustrate how the left
property works:
Positioning Elements
Example: Absolute Positioning
<div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>The element is positioned 20 pixels from the left edge of its containing block.</p></div>
Example: Relative Positioning
<div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>The element is moved 20 pixels to the right from its normal position.</p></div>
Example: Relative Positioning with Float
<div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>The element is moved 20 pixels to the right and floated to the right.</p></div>
Example: Absolute Positioning Inside a Relative Parent
<div id="example_4"> <pre> position: relative; left: 20px; top: 20px; </pre> <p>The element is positioned 20 pixels from the left edge of its relative parent.</p></div>
Practical Use Cases
Example: Absolute Positioning
<div id="absolute-example"> <p>This div is absolutely positioned 20px from the left edge of its containing block.</p></div>
#absolute-example { position: absolute; left: 20px; top: 20px; width: 200px; height: 100px; background-color: #d8f5ff;}
Example: Relative Positioning
<div id="relative-example"> <p>This div is relatively positioned 20px to the right from its normal position.</p></div>
#relative-example { position: relative; left: 20px; width: 200px; height: 100px; background-color: #c1ffdb;}
Example: Fixed Positioning
<div id="fixed-example"> <p>This div is fixed positioned 20px from the left edge of the viewport.</p></div>
#fixed-example { position: fixed; left: 20px; top: 20px; width: 200px; height: 100px; background-color: #ffd7c2;}
Example: Sticky Positioning
<div id="sticky-example"> <p>This div is sticky positioned 20px from the left edge of the viewport when scrolled.</p></div>
#sticky-example { position: sticky; left: 20px; top: 20px; width: 200px; height: 100px; background-color: #ffc7e4;}
HTML
<div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p> </div>
<div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>Relative position in relation to its siblings.</p> </div>
<div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>Relative to its sibling div above, but removed from flow of content.</p>
<div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>Absolute position inside of a parent with relative position</p> </div>
<div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>Absolute position with both left and right declared</p> </div> </div></div>
CSS
#wrap { width: 700px; margin: 0 auto; background: #5c5c5c;}
pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word;}
.example { width: 200px; height: 100px; background-color: #d8f5ff; margin: 10px;}
#example_1 { position: absolute; left: 20px; top: 20px;}
#example_2 { position: relative; right: 0;}
#example_3 { position: relative; top: 20px; left: 20px;}
#example_4 { position: absolute; bottom: 10px; right: 20px;}
#example_5 { position: absolute; right: 0; left: 0; top: 200px;}
Specifications and Browser Compatibility
The left
property is formally defined in the CSS specifications, ensuring consistent usage across different browsers and platforms.
Key Specifications
- Initial Value:
auto
- Applies To: Positioned elements (
absolute
,relative
,fixed
,sticky
) - Inherited: No
- Percentages: Calculated based on the width of the containing block
- Computed Value: Absolute length, percentage, or
auto
- Animation Type: Length, percentage, or
calc()
Browser Compatibility
The left
property is widely supported across all major browsers:
- Google Chrome: Supported since version 1.0
- Microsoft Edge: Supported since version 12.0
- Internet Explorer: Supported since version 5.5
- Firefox: Supported since version 1.0
- Safari: Supported since version 1.0
- Opera: Supported since version 5.0
See Also
For further reading, check out these resources:
- CSS
inset
Property - CSS Logical Properties
- CSS
position
Property - CSS
top
Property - CSS
right
Property - CSS
bottom
Property - CSS Positioning Guide
- CSS Flexbox
- CSS Grid Layout
- CSS Box Model
These resources will help you master the left
property and enhance your web development skills. Happy coding!






Talk with CEO
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.