CSS left Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Page and container */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding: 20px;
    background: #f7f8fa;
    color: #222;
}

.stage {
    position: relative; /* establishes positioning context for absolutely positioned children */
    width: 480px;
    height: 200px;
    margin-top: 16px;
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Positioned boxes demonstrating the left property */
.box {
    position: absolute; /* left only affects positioned elements (absolute/relative/fixed/sticky) */
    padding: 10px 14px;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.box1 {
    left: 20px; /* moves 20px from the left edge of .stage */
    top: 20px;
    background: #2b6cb0;
}

.box2 {
    left: 50%; /* positioned at 50% of the .stage width */
    top: 80px;
    transform: translateX(-50%); /* centers the element horizontally */
    background: #38a169;
}

.box3 {
    left: -10px; /* negative value moves the element outside the left boundary */
    top: 140px;
    background: #d53f8c;
}</style></head><body><h1>CSS left property  -  Example</h1>
<div class="stage">
    <div class="box box1">Left: 20px</div>
    <div class="box box2">Left: 50% (centered)</div>
    <div class="box box3">Left: -10px</div>
</div></body></html>