CSS - position Property
CSS - position Property
The position Property
CSS position property specifies the position of an element in a web page. CSS properties such as top , bottom , right , and left are used to control the exact position of an element in the web page.
The position property can be used to create floating elements, a floating sidebar, and other interactive features.
Syntax
The syntax for the CSS position property is as follows:
position: static | relative | absolute | fixed | sticky;Possible Values
| Value | Description |
|---|---|
| static | It is the default value where the element is positioned according to the normal flow of the page. So, if we set left/right/top/bottom/z-index, then there will be no effect on that element. |
| relative | The element’s original position is according to the normal flow of the page just like static value. But now the left/right/top/bottom/z-index will work. |
| absolute | The element is completely removed from the document flow. It is then positioned with respect to its nearest positioned ancestor element. The positioned element should be any value except static . |
| fixed | The element’s fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. Here the element is totally removed from the document’s flow and does not have a position relative to any part of the document. |
| sticky | The element sticks to the top of its nearest positioned ancestor that has a “scrolling mechanism”. It behaves as relative till it reaches the scrolling position, then behaves as fixed . |
Applies To
The position property can be applied to all elements.
CSS position Property with static Value
The position property for the div element in this example is set to static. The left, right, top, and bottom properties will have no effect on the div element.
Example
The following example sets the position property of the div element to static .
CSS position Property with relative Value
The following example sets the position property of the div element to relative . This allows you to set the top, bottom, left, and right positioning of the div element.
Example
In this example, we have used position: relative; to set the positioning of the child element to relative.
CSS position Property with absolute Value
You can use absolute value to set the position of an element relative to its nearest ancestor element.
Example
In this example, we have used position: absolute; to position the child element relative to its nearest positioned container.
CSS position Property with fixed Value
To make an element stay in the same place on the screen even when the user scrolls, you can set the position property to fixed. You can then use the left, right, top, and bottom properties to position the element where you want it.
Example
In this example, we have used position: fixed; to create a fixed position of paragraph on the div.
CSS position Property with sticky Value
You can set the position property to sticky to create an element that sticks to the top of the viewport when the user scrolls through a page. It is a combination of the position: relative and position: fixed properties.
Example
In this example, we have applied position: sticky; on a paragraph element that scrolls until a specified position then sticks at one place.
Positioning Text In an Image Using CSS
To position the text in different directions, you can use the position: absolute property.
Example
In this example, we have used the absolute value to position the text elements in different directions on the image. The text elements are positioned at the center, top left, top right, bottom left, and bottom right corners.
CSS Position - Related Properties
Following is the list of all the CSS properties related to the position :
| Property | Description |
|---|---|
| bottom | Used with the position property to place the bottom edge of an element. |
| clip | Sets the clipping mask for an element. |
| left | Used with the position property to place the left edge of an element. |
| overflow | Determines how overflow content is rendered. |
| position | Sets the positioning model for an element. |
| right | Used with the position property to place the right edge of an element. |
| top | Sets the positioning model for an element. |
| vertical-align | Sets the vertical positioning of an element. |
| z-index | Sets the rendering layer for the current element. |