CSS Static and Relative Position
static is the normal flow every element starts in, while relative nudges an element from that spot without disturbing anything around it.
The position property decides how an element is placed and whether the top, right, bottom, and left offsets apply to it. The two gentlest values are static and relative, and understanding them is the foundation for the more powerful values.
position: static
static is the default for every element. The element sits wherever normal document flow puts it, and the offset properties like top and left are simply ignored. You rarely write static yourself except to reset a previous value.
The default
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: static;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>position: relative
relative keeps the element in normal flow but lets you shift it with top, right, bottom, and left. The important detail is that its original space is preserved, so neighboring elements do not move to fill the gap.
Nudging an element
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
top: 10px;
left: 20px;
}
</style>
</head>
<body>
<div class="box">Box</div>
</body>
</html>The anchor for absolute children
relative has a second job: it becomes the reference box for any absolutely positioned descendant. This is the standard trick for placing a badge in the corner of a card. See CSS Fixed and Absolute Position.
Positioning context
<!DOCTYPE html>
<html>
<head>
<style>
.card {
position: relative;
}
.card .badge {
position: absolute;
top: 8px;
right: 8px;
}
</style>
</head>
<body>
<div class="card">
<p>Wireless headphones</p>
<span class="badge">New</span>
</div>
</body>
</html>
