CSS NOTES 1 : Basics, Properties and Units | CSS NOTES 2 : Positioning
Like the elements contained within it, the window has a width and height, as well as a top, bottom, left and right. You can think of the browser window as being the parent of all other elements.
Types of CSS Positioning | ||
Name | How it works | Example |
Static | Flows the content inline(one after the next), but position of element can't be touched. | .stat {position: static; font: bold 28pt courier; color: #cccccc;} |
Relative | Flows the content inline(one after the next), but allows you to move the element around relative to the elements natural position on the screen. The space the element occupied is preserved. All relatively positioned elements in the window are positioned relative to the top-left corner of the area where they would have appeared if they had been left alone(also referred to as their normal place in the flow. |
.rel {position: relative; top: 70px; left: 25px;} |
Absolute | Element is placed independently of other elements on the screen in a specific position in the window (or the parent element if it is nested). The space the element occupied is collapsed. The element is now out of the normal flow. All absolutely positioned elements in the window are positioned either directly (if not nested in another element) or indirectly (if nested in another element) relative to the origin of the live window area, which is the top-left corner of the display area in browser windows. This is called the initial containing block. An element with position:absolute contained within an element with position:relative will base its position on the edges of that parent element, not on the edges of the browser window. This is called positioning context. The containing block for an absolutely positioned element is the nearest positioned ancestor element (that is, any element with a value for position other than static). |
#abs {position: absolute; top: 25px; left: 375px; width: 100px;} |
Fixed | Works almost like absolute positioning. Element is placed independently of other elements on the screen in a specific position in the window. The difference is that when a page scrolls in the window, fixed elements stay in their initial positions relative to the viewport, and do not scroll. | #fix {position: fixed; top: 10px; right: 5%; width: 125px;} |
Sticky | A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). You can use it to make top navigation bars that do not scroll offscreen when the page is scrolled, but rather, they can 'stick' at the top. |
#test { position: -webkit-sticky; position: sticky; top: 0; } |
Go to W3C positioning info
W3C Positioning info (from W3C website)
The 'position' and 'float' properties determine which of the CSS2 positioning algorithms is used to calculate the position of a box.
Value: | static | relative | absolute | fixed | inherit | sticky |
Initial: | static |
Applies to: | all elements, but not to generated content |
Inherited: | no |
Percentages: | N/A |
Media: | visual |
The values of this property have the following meanings:
@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }