YouTip

* * * The `position` property is used to specify the positioning method of an element. The five common values are as follows: | Value | Description | Anchor | | --- | --- | --- | | ( | Default value; elements follow the normal document flow and are not affected by top/right/bottom/left | ( | | ( | Offsets relative to its original position without removing it from the document flow | ( | | ( | Positioned relative to the nearest positioned ancestor (otherwise relative to ); removes it from the document flow | ( | | ( | Positioned relative to the browser window; position remains unchanged when scrolling | ( | | ( | Behaves as relative until a specified position is reached, then behaves as fixed | ( | Elements can be positioned using the `top`, `right`, `bottom`, and `left` properties, but these only take effect when `position` is set (and not to `static`). Different positioning methods affect the reference point and behavior of these properties. * * * ## Static Positioning The default value for HTML elements, meaning no positioning and following the normal document flow. Static positioned elements are not affected by top, bottom, left, or right. ## Example div.static{position:static; border:3 px solid#73AD21; } [Try it Yourself »]( * * * ## Fixed Positioning The element's position is fixed relative to the browser window. Even if the window is scrolled, it will not move: ## Example p.pos_fixed{position:fixed; top:30 px; right:5 px; } [Try it Yourself »]( **Note:** Fixed positioning requires a !DOCTYPE declaration in IE7 and IE8 to work. Fixed positioning removes the element from the document flow, so it does not occupy space. Fixed positioned elements can overlap with other elements. * * * ## Relative Positioning Relative positioned elements are positioned relative to their normal position. ## Example h2.pos_left{position:relative; left:-20 px; }h2.pos_right{position:relative; left:20 px; } [Try it Yourself »]( Moving a relatively positioned element does not change the space it originally occupied. ## Example h2.pos_top{position:relative; top:-50 px; } [Try it Yourself »]( Relative positioned elements are often used as containers for absolutely positioned elements. * * * ## Absolute Positioning Absolute positioned elements are positioned relative to the nearest positioned ancestor. If no positioned ancestor exists, it is positioned relative to : ## Example h2{position:absolute; left:100 px; top:150 px; } [Try it Yourself »]( Absolute positioning removes the element from the document flow, so it does not occupy space. Absolute positioned elements can overlap with other elements. * * * ## Sticky Positioning The term "sticky" literally means sticky or adhesive, so this can be referred to as sticky positioning. `position: sticky;` positions the element based on the user's scroll position. A sticky positioned element switches between **position:relative** and **position:fixed** depending on the scroll position. It behaves like **position:relative**, but when the page scrolls past the target area, it behaves like **position:fixed**, sticking to the target position. The element is positioned relatively until a certain threshold is crossed, after which it becomes fixed. This threshold refers to one of top, right, bottom, or left. In other words, specifying any one of these four thresholds is required for sticky positioning to take effect. Otherwise, its behavior is identical to relative positioning. **Note:** Internet Explorer, Edge 15, and earlier versions of IE do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). ## Example div.sticky{position: -webkit-sticky; position:sticky; top:0; background-color:green; border:2 px solid#4CAF50; } [Try it Yourself »]( * * * ## Overlapping Elements Positioned elements are independent of the document flow, so they can cover other elements on the page. The `z-index` property specifies the stack order (which element should appear in front or behind). An element can have a positive or negative stack order: ## Example img{position:absolute; left:0 px; top:0 px; z-index:-1; } [Try it Yourself »]( Elements with higher stack order always appear in front of those with lower stack order. **Note:** If two positioned elements overlap and no z-index is specified, the element that appears later in the HTML code will be displayed on top. * * * ![Image 1: Examples]( ## More Examples ( This example demonstrates how to set the shape of an element. The element is clipped into this shape and displayed. ( This example shows how the overflow property creates a scrollbar when content within an element exceeds the specified area. ( This example demonstrates how to configure the browser to automatically handle overflow. ( This example shows how to change the cursor. * * * ## All CSS Positioning Properties The number in the "CSS" column indicates which CSS version (CSS1 or CSS2) defined the property. | Property | Description | Value | CSS | | --- | --- | --- | --- | | ( | Defines the offset between the bottom margin edge of the positioned element and the bottom edge of its containing block. | auto _length %_ inherit | 2 | | ( | Clips an absolutely positioned element | _shape_ auto inherit | 2 | | ( | Displays the cursor in 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 | | ( | Defines the offset between the left margin edge of the positioned element and the left edge of its containing block. | auto _length %_ inherit | 2 | | ( | Specifies what happens when content overflows the element's area. | auto hidden scroll visible inherit | 2 | | ( | Specifies how to handle content overflow at the top/bottom edges of the element's content area | auto hidden scroll visible no-display no-content | 2 | | ( | Specifies how to handle content overflow at the right/left edges of the element's content area | auto hidden scroll visible no-display no-content | 2 | | ( | Specifies the positioning type of the element | absolute fixed relative static inherit | 2 | | ( | Defines the offset between the right margin edge of the positioned element and the right edge of its containing block. | auto _length %_ inherit | 2 | | ( | Defines the offset between the top margin edge of the positioned element and the top edge of its containing block. | auto _length %_ inherit | 2 | | ( | Sets the stack order of the element | _number_ auto inherit | 2 |