CSS Position
The type of positioning technique applied to an element (static, relative, fixed, absolute, or sticky) is specified by the position attribute.
The position Property
The kind of positioning technique applied to an element is specified by its position property.
Five distinct position values exist:
- static
- relative
- fixed
- absolute
- sticky
Next, the properties of top, bottom, left, and right are used to place the elements. But until the position property is set first, these properties won’t function. Additionally, their operations vary based on the value of the position.
position: static;
By default, HTML elements have static positions.
The top, bottom, left, and right attributes have no effect on static positioned elements.
An element with the position static is always positioned in accordance with the page’s natural flow and is not specifically positioned.
Here is the CSS that is used:
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
position: relative;
An element with position: relative; is positioned relative to its normal position.
A relatively-positioned element will be moved from its default position when its top, bottom, right, and left properties are changed. No other content will be resized to fill in the space the element left behind.
Here is the CSS that is used:
Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
Positioned relative to the viewport, an element with position: fixed; remains in the same location regardless of how the page is scrolled. The element can be positioned using the properties on the top, right, bottom, and left.
Where an element would ordinarily have been, there is no space left on the page when it is fixed.
Take note of the fixed element in the page’s lower-right corner. This is the utilized CSS:
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
Instead of being positioned relative to the viewport as fixed elements are, an element with position: absolute is positioned relative to its nearest positioned predecessor.
On the other hand, an absolute positioned element uses the document body and scrolls with the page if it has no positioned ancestors.
Note: components that are positioned absolute are separated from the regular flow and may overlap other components.
Here’s an easy illustration:
Here is the CSS that is used:
Example
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
The user’s scroll position determines where an element with position: sticky; is positioned.
Depending on the scroll position, a sticky element alternates between being fixed and being relative. It moves relative to the viewport until a predetermined offset position is reached, at which point it “sticks” there (much like position:fixed).
To learn how sticky placement operates, attempt to scroll inside this frame.
-----------scoller mukvu--------
Note: Sticky placement is not supported by Internet Explorer. A -webkit- prefix is necessary for Safari (see example below). For sticky placement to function, you must additionally provide at least one of the top, right, bottom, or left.
When you reach the sticky element’s scroll position in this example, it remains at the top of the page (top: 0).
Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Positioning Text In an Image
How to position text over an image:
-----------example mukvu-------------
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |
