Here are two plain ol' nested <div> elements.
<div class="parent-box"> <div class="child-box"></div> </div>
We can nudge them all over to the right by setting the parent <div> positioning to "relative" and using either "left" or "right" to move it.
.parent-box {
left: 100px;
position: relative;
}
Normally, adding "position: absolute" to an element means it will be positioned relative to the body of the page. Click the button to see an example.
.child-box {
right: 20px;
position: absolute;
top: 20px;
}
Where'd the box go? Check the top of the page.
If we set the parent box to "position: relative" then our child box will be absolutely positioned relative to the parent.
Confused? Click the button to see it.
.parent-box {
position: relative;
}
.child-box {
position: absolute;
right: 20px;
top: 20px;
}
If we add an additional nested box, it will be positioned relative to its parent.
.parent-box {
position: relative;
}
.child-box {
position: absolute;
right: 20px;
top: 20px;
}
.grandchild-box {
bottom: 10px;
left: 10px;
position: absolute;
}