CSS Position(定位)
The position property specifies the type of positioning method used for an element.
The five values for the position property are:
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
Static Positioning
Static positioning is the default for HTML elements, meaning no positioning, and they follow the normal document flow.
Static positioned elements are not affected by the top, bottom, left, and right properties.
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
Fixed Positioning
An element with fixed positioning is positioned relative to the browser window.
It does not move even if the window is scrolled:
Example
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
Note: Fixed positioning requires the !DOCTYPE declaration to be supported in IE7 and IE8.
Fixed positioning makes the element's position independent of the document flow, thus it does not occupy space.
Fixed positioned elements overlap other elements.
Relative Positioning
A relatively positioned element is positioned relative to its normal position.
Example
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
Moving a relatively positioned element does not change the space originally occupied by it.
Example
h2.pos_top {
position: relative;
top: -50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Absolute Positioning
An absolutely positioned element is positioned relative to the nearest positioned ancestor. If there is no positioned ancestor, it is positioned relative to the <html> element:
Example
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Absolute positioning makes the element's position independent of the document flow, thus it does not occupy space.
Absolute positioned elements overlap other elements.
Sticky Positioning
Sticky positioning is a mix of relative and fixed positioning.
position: sticky; is based on the user's scroll position.
A sticky element toggles between position: relative and position: fixed, depending on the scroll position.
It behaves like position: relative; within its parent until a given offset threshold is met in the viewport, then it behaves like position: fixed; and stays in place.
Sticky positioning requires one of the top, right, bottom, or left properties to be set for it to work. Otherwise, it behaves like relative positioning.
Note: Internet Explorer and Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix.
Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Overlapping Elements
Positioned elements are independent of the document flow and can overlap other elements.
The z-index property specifies the stacking order of elements (which element should be in front or behind).
An element can have a positive or negative stacking order:
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Elements with a higher stacking order are always in front of elements with a lower stacking order. Note: If two positioned elements overlap and no z-index is specified, the element positioned last in the HTML code will be displayed on top.
More Examples
Clipping the Shape of an Element
This example demonstrates how to set the shape of an element. The element is clipped into this shape and displayed.
How to Use Scrollbars to Display Overflow Content within an Element
This example demonstrates how to create a scrollbar with the overflow property when an element's content is too large to fit in a specified area.
How to Set Browser Auto Overflow Handling
This example demonstrates how to set the browser to automatically handle overflow.
This example demonstrates how to change the cursor.
All CSS Positioning Properties
The numbers in the "CSS" column indicate which version of CSS (CSS1 or CSS2) defined the property.
| Property | Description | Values | CSS |
|---|---|---|---|
| bottom | Defines the offset from the bottom margin edge of a positioned element to the bottom edge of its containing block. | auto <br> length<br> %inherit | 2 |
| clip | Clips an absolutely positioned element. | shapeauto <br>inherit | 2 |
| cursor | Specifies the type of cursor to be displayed. | urlauto <br>crosshair <br>default <br>pointer <br>move <br>e-resize <br>ne-resize <br>nw-resize <br>n-resize <br>se-resize <br>sw-resize <br>s-resize <br>w-resize <br>text <br>wait <br>help | 2 |
| left | Defines the offset from the left margin edge of a positioned element to the left edge of its containing block. | auto <br> length<br> %inherit | 2 |
| overflow <br> | Sets what happens when content overflows an element's box. | auto <br>hidden <br>scroll <br>visible <br>inherit | 2 |
| overflow-y <br> | Specifies how to handle the overflow of content at the top/bottom edges of an element's content area. | auto <br>hidden <br>scroll <br>visible <br>no-display <br>no-content | 2 |
| overflow-x <br> | Specifies how to handle the overflow of content at the right/left edges of an element's content area. | auto <br>hidden <br>scroll <br>visible <br>no-display <br>no-content | 2 |
| position | Specifies the type of positioning method used for an element. | absolute <br>fixed <br>relative <br>static <br>inherit | 2 |
| right | Defines the offset from the right margin edge of a positioned element to the right edge of its containing block. | auto <br> length<br> %inherit | 2 |
| top | Defines the offset from the top margin edge of a positioned element to the top edge of its containing block. | auto <br> length<br> %inherit | 2 |
| z-index | Sets the stacking order of an element. | numberauto <br>inherit | 2 |