CSS Position
The position attribute specifies the positioning type of the element.
The five values of the position property:
Elements can be positioned using the top, bottom, left and right attributes. However, these properties will not work unless the position property is set first. They also have different ways of working, depending on the positioning method.
static position
The default value of the HTML element, that is, no positioning, follows the normal document flow object.
Statically positioned elements will not be affected by top, bottom, left, and right.
Example
div.static
{
position: static;
border: 3px solid #73AD21;
}fixed position
The position of the element is a fixed position relative to the browser window.
Even if the window is scrolling, it will not move:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}Note: Fixed positioning needs to be described under IE7 and IE8, with !DOCTYPE can be supported.
Fixed positioning makes the position of the element independent of the document flow, so it does not occupy space.
Fixed positioning elements overlap with other elements.
relative position
The positioning of the relative positioning element is relative to its normal position.
Example
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}Move the relatively positioned element, but the space it originally occupies will not change.
Example
h2.pos_top
{
position:relative;
top:-50px;
}Relatively positioned elements are often used as container blocks for absolutely positioned elements.
absolute position
The position of the absolutely positioned element is relative to the nearest positioned parent element. If the element does not have a positioned parent element, then its position is relative to <html>:
Example
h2{
position:absolute;
left:100px;
top:150px;
}Absolute positioning makes the position of the element independent of the document flow, so it does not take up space.
The absolute positioned element overlaps with other elements.
sticky position
Sticky literally means sticky, paste, so it can be called sticky positioning.
position: sticky; Positing based on the user's scroll position.
Sticky positioning elements are dependent on the user's scrolling, switching between position: relative and position: fixed positioning.
It behaves like position: relative; and when the page scrolls beyond the target area, it behaves like position: fixed; and it will be fixed at the target position.
Element positioning is expressed as relative positioning before crossing a certain threshold, and fixed positioning afterwards.
This specific threshold refers to one of top, right, bottom or left. In other words, specify one of the top, right, bottom or left thresholds to make sticky positioning take effect. Otherwise, its behavior is the same as relative positioning.
Note: Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning. Safari needs to use the -webkit- prefix (see the example below).
Example
div.sticky
{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}Overlapping Elements
The positioning of elements has nothing to do with the document flow, so they can cover other elements on the page.
The z-index attribute specifies the stacking order of an element (which element should be placed before or after)
An element can have a stacking order of positive or negative numbers:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}Elements with higher stacking order are always in front of elements with lower stacking order.
Note: If two positioning elements overlap and no z-index is specified, the last element positioned in the HTML code will be displayed first.
More Examples
This example demonstrates how to set the shape of an element. The element is cut into this shape and displayed.
How to use the scroll bar to display the overflowing content inside the element
This example demonstrates how the overflow attribute creates a scroll bar and how to set it to adapt when the content of an element is too large in the specified area.
How to set up automatic browser overflow handling
This example demonstrates how to set up the browser to automatically handle overflow.
This example demonstrates how to change the cursor.
CSS Positioning Properties
The number in the "CSS" column indicates which CSS (CSS1 or CSS2) version defines the property.
| Property | Description | Value | CSS |
|---|---|---|---|
| bottom | Defines the offset between the lower margin boundary of the positioning element and the lower boundary of its containing block. | auto length % inherit | 2 |
| clip | Clip an absolutely positioned element | shape auto inherit | 2 |
| cursor | Display the cursor moved to the specified type | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help | 2 |
| left | Defines the offset between the left margin boundary of the positioning element and the left boundary of its containing block. | auto length % inherit | 2 |
| overflow | Set what happens when the content of an element overflows its area. | auto hidden scroll visible inherit | 2 |
| overflow-y | Specify how to handle the content of the top/bottom edge overflowing the element's content area | auto hidden scroll visible no-display no-content | 2 |
| overflow-x | Specify how to handle the content of the right/left edge overflowing the element's content area | auto hidden scroll visible no-display no-content | 2 |
| position | Specify the positioning type of the element | absolute fixed relative static inherit | 2 |
| right | Defines the offset between the right margin boundary of the positioning element and the right boundary of its containing block. | auto length % inherit | 2 |
| top | Defines the offset between the upper margin boundary of a positioning element and the upper boundary of its containing block. | auto length % inherit | 2 |
| z-index | Set the stacking order of elements | number auto inherit | 2 |