Negative Values in CSS Positioning
The properties we studied top, right, bottom and left can take not only positive but also negative values. Let's look at some examples.
Example
In the following example, the element is absolutely positioned relative to its parent, and is positioned 0 from the top, 0 from the left:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
Example
Now let's move the element to position -20px top, -30px left:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
In the following example, the green block is centered on the screen using margin, and the red blocks are positioned relative to it. Repeat the page using the following example:
