CSS Left property

Relative Positioning with Left:

                          
                            div {
                                position: relative;
                                left: 20px; /* Move 20 pixels to the right from its normal position */
                            }

This example positions the div element 20 pixels to the right of its normal position within the document flow.


Absolute Positioning with Left:

                          
                            div {
                                position: absolute;
                                left: 50px; /* Position 50 pixels to the right of the nearest positioned ancestor */
                            }

In this example, the div element is positioned 50 pixels to the right of its nearest positioned ancestor.


Fixed Positioning with Left:

                          
                            div {
                                position: fixed;
                                left: 0; /* Fixed to the left edge of the viewport */
                            }

The div element is fixed to the left edge of the viewport. It will stay in the same position even when the page is scrolled.


Percentage Values:

                          
                            div {
                                position: relative;
                                left: 10%; /* Move 10% of the containing element's width to the right */
                            }

This example moves the div element 10% of its containing element's width to the right.


Negative Values:

                          
                            div {
                                position: relative;
                                left: -30px; /* Move 30 pixels to the left of its normal position */
                            }

Negative values for left will move the element to the left of its normal position.


Combining with Other Properties:

                          
                            div {
                                position: absolute;
                                top: 50px;
                                left: 20px;
                            }

This example makes a combination of top and left properties, so the element will have a position 50 pixel from the top and 20 pixels to the right from the nearest positioned ancestor.