Introduction to CSS left
CSS left property is defined to declare a left side or horizontal position of a positioned element and one of the offset properties. This is applied to the position property values like fixed, absolute and sometimes relative. Here the left value has the preference from left to right for the container as the CSS position in conjunction with left value helps to align elements concerning document viewports. If the positioned element is static then there is no effect on this left property.
Syntax and parameters:
# box
{ position:relative;
Left: length | percentage | auto | initial ;
}
- length: It determines the position of an element on the left edge in px, pt, em. And negative values are not assigned here.
- auto: It’s a default value, the position of the left edge is decided by the browser.
- percentage: The position element is given in percentage.
How left Property works in CSS?
To have a good CSS web Development, the CSS comes with aligning elements to make it easy. The elements positioned as either fixed or absolute, the distance is been calculated based on the left margin of the element and the left container block. The positioned elements are the one where their position changes anything except static. Depending upon the ancestor’s container, the working principle of the left property process differently.
1. Left on Relative Position
Here the left property adds an offset to the elements left edge and it moves automatically to its right to its original form. The positive value makes box to its right
2. Left On Absolute Position
For those having absolute positioning element, this left property shifts the left edge of an element to its right side from the left edge having an ancestor container with the positioning. In simple terms, the element moves towards the right side from the starting position.
3. Static
This property doesn’t have any effect on this static position. To check for an animation effect, we can still use this and takes px or calc () values.
4.5 (5,639 ratings)
View Course
Code:
@keyframes anim {
40% {
left: 100px;
}
Examples of CSS left
Given below are the examples on left property in CSS by looking at its effects on different positioned elements.
Example #1
An example showing the position ‘Relative’ and set a value to the ‘left’ property.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Demo On CSS left Property
</title>
<style>
div{
position: relative;
width: 120px;
height: 100px;
font-size: 25px;
}
#aa {
left: 200px;
border: 4px solid blue;
}
#bb {
left: 70%;
border: 4px solid green;
}
#cc {
left: 80%;
border: 4px solid yellow;
}
#exap {
left: initial;
border: 4px solid lightbrown;
}
</style>
</head>
<body>
<h1> Example of the left Property </h1>
<div id = "aa"> left: 200px; </div>
<div id = "bb"> left: 70%; </div>
<div id = "cc"> left: 80%; </div>
<div id = "exap"> left: initial; </div>
</body>
</html>
Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Demo On CSS left Property With Image on left
</title>
<style>
h1{
color: rose;
}
img {
position :fixed;
left : 40px;
}
</style>
</head>
<body>
<h1> Example of the left Property </h1>
<p> Frankfurt is a Germany's Financial Capital city and considered to be a metroplotian city.
And it takes a wide diverse population with skyscrapers and largest urban forests which is sometimes called as 'city forest'.
They are geographically positioned on the Main River and has important trading centres.
Frankfurt is Germany's Financial Capital city and considered to be a metropolitan city.
And it takes a wide diverse population with skyscrapers and largest urban forests which is sometimes called as 'city forest'.
They are geographically positioned on the Main River abnd has important trading centers.
</p>
<img src="frankfurt.jpg"> </img>
</body>
</html>
We could also do this using right, top, values to check the left method working. In the above example, i have used the CSS position fixed which remain at the left edge margin of the container.
Output:
Example #3
Showing two positioning in the box.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div{
float:left;
width:350px;
height:150px;
margin:12px;
text-align:center;
border:6px solid maroon;
background:rgba(46, 41, 112, 1);
color:fuchsia;
font-size:34px;
line-height:3.5em;
box-shadow:6px 6px 6px olive;
}
.container1{position:absolute;left:-40px;}
.container2{position:absolute;right:600px;}
</style>
</head>
<body>
<div class="container1"> View1</div>
<div class="container2">View2</div>
</body>
</html>
In this example we have declared two class to have an absolute position and the right value is set to 600px and the left value is given to negative px. Here the first element <div> is in action and moved to the left side.
Output:
Example #4
Three positioned elements.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div.Base {
position: relative;
width: 310px;
height: 150px;
border: 4px solid teal;
}
div.Derived {
position: absolute;
left: -12px;
width: 200px;
height: 220px;
border: 4px solid aqua;
}
div.Subclass{
position: fixed;
left: -10px;
width: 210px;
height: 150px;
border: 4px solid purple;
}
</style>
</head>
<body>
<h1>The left Property with three Positioned elements</h1>
<div class="Base">Im with relative Position;
<div class="Derived">Im with absolute Position on the left. </div>
</div>
<div class="Subclass">This Div. acts individual. </div>
</body>
</html>
The above code uses negative values on the left property with no positioned parents. The last class ‘Subclass’ acts individually even though their position is fixed it moves the container to the left margin. We could see in the output, all the three classes are overlapped.
Output:
Example #5
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.dem-orange {
position: absolute;
background: orange;
width: 200px;
height: 200px;
left: 4px;
top: 4px;
}
.dem-blue
{
position : relative;
background: red;
width: 150px;
height: 100px;
left: 8px;
}
</style>
</head>
<body>
<div class="main">
<div class="dem-orange"></div>
<div class="dem-blue"></div>
</div>
</body>
</html>
Output:
Conclusion
In the above article we saw, how to use the property called left with their working and examples. It allows nudging different elements in a different orientation with the left, right values and the initial value always lies in the flow of the document part.
Recommended Articles
This is a guide to CSS left. Here we discuss the introduction, how left property works in CSS along with examples respectively. You may also have a look at the following articles to learn more –
