CSS Position
Definition:
It means when you add an element to your webpage and want to place it exactly where you like — such as top-right, center, or bottom-left — then the position property helps you do that. It decides whether your element follows the normal document flow, stays fixed on the screen, or moves based on its parent box.
Syntax:
selector {
position: static | relative | absolute | fixed | sticky;
}
Here,
The values static, relative, absolute, fixed, and sticky are the types (i.e., possible values) of the position property. You can apply only one at a time.
Type of CSS Position Properties - work
Static ->Default value. Element stays in normal flow. Top, left doesn’t work here.
Relative ->Moves from its original position. But space stays reserved.
Absolute – It moves the element based on the nearest parent that has a position set (except static) and takes it out of the normal page flow.
Fixed ->Always stays at the same spot on screen. Doesn't move while scrolling.
Sticky ->Acts like relative first, then becomes fixed after scrolling. Needs to work.
Example:
HTML
Positioned Box
CSS
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
}
.box {
position: absolute;
top: 20px;
left: 30px;
background-color: lightblue;
padding: 10px;
}
Output:
The light blue box will appear 20px from the top and 30px from the left inside the container. It’s placed exactly there using absolute position, based on its parent with relative. It stays out of the normal layout flow.
List of Properties:
Parameter Description
Position – Defines how an element is placed on the page (in normal flow or custom position like relative, absolute, etc.).
Top – Sets how far the element is from the top, used with positioned elements.
Right – It tells how much space should be there between the element and the right edge.
Bottom – Defines the distance from the bottom of the container.
Left – Sets how far the element is from the left side.
Z-index – It controls which element will come in front when two or more elements overlap.
Inset – A shorthand to set top, right, bottom, and left in one go.
Float – Moves the element to the left or right, usually used in older layouts.
Clear – It stops the element from sitting next to floated items and pushes it below them instead.
Transform: translate() – It helps you move any element manually from its original place in any direction (left, right, up, or down).