{"id":16536,"date":"2012-03-19T20:03:24","date_gmt":"2012-03-20T03:03:24","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=16536"},"modified":"2022-09-28T13:14:10","modified_gmt":"2022-09-28T20:14:10","slug":"position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/","title":{"rendered":"position"},"content":{"rendered":"\n<p>The <code>position<\/code> property can help you manipulate the location of an element, for example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  position: relative;\n  top: 20px;\n}<\/code><\/pre>\n\n\n\n<p>Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just how much control this gives us (although this isn\u2019t a good idea for performance reasons):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fcdf9b19b6bed8da6af791d7433116b0\" src=\"\/\/codepen.io\/anon\/embed\/fcdf9b19b6bed8da6af791d7433116b0?height=450&amp;theme-id=1&amp;slug-hash=fcdf9b19b6bed8da6af791d7433116b0&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fcdf9b19b6bed8da6af791d7433116b0\" title=\"CodePen Embed fcdf9b19b6bed8da6af791d7433116b0\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><code>relative<\/code> is only one of six values for the <code>position<\/code> property. Here are the others:<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<ul><li><code>static<\/code>: every element has a static position by default, so the element will stick to the normal page flow. So if there is a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/left\/\">left<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/r\/right\/\">right<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/top\/\">top<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/bottom\/\">bottom<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/\">z-index<\/a> set then there will be no effect on that element.<\/li><li><code>relative<\/code>: an element\u2019s original position remains in the flow of the document, just like the <code>static<\/code> value. But now <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/left\/\">left<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/r\/right\/\">right<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/top\/\">top<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/bottom\/\">bottom<\/a>\/<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/\">z-index<\/a> will work. The positional properties \u201cnudge\u201d the element from the original position in that direction.<\/li><li><code>absolute<\/code>: the element is removed from the flow of the document and other elements will behave as if it\u2019s not even there whilst all the other positional properties will work on it.<\/li><li><code>fixed<\/code>: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.<\/li><li><code>sticky<\/code>: the element is treated like a <code>relative<\/code> value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a <code>fixed<\/code> position where it is told to stick.<\/li><li><code>inherit<\/code>: the <code>position<\/code> value doesn\u2019t cascade, so this can be used to specifically force it to, and <code>inherit<\/code> the positioning value from its parent.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-absolute\">Absolute<\/h3>\n\n\n<p>If a child element has an <code>absolute<\/code> value then the parent element will behave as if the child isn\u2019t there at all:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  position: absolute;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_7291a601af02608d928b1232d6456ec9\" src=\"\/\/codepen.io\/anon\/embed\/7291a601af02608d928b1232d6456ec9?height=450&amp;theme-id=1&amp;slug-hash=7291a601af02608d928b1232d6456ec9&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 7291a601af02608d928b1232d6456ec9\" title=\"CodePen Embed 7291a601af02608d928b1232d6456ec9\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And when we try to set other values such as <code>left<\/code>, <code>bottom<\/code>, and <code>right<\/code> we&#8217;ll find that the child element is responding not to the dimensions of its parent, but the document:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_e7d3b934a8ce213384dc119106b71b7d\" src=\"\/\/codepen.io\/anon\/embed\/e7d3b934a8ce213384dc119106b71b7d?height=450&amp;theme-id=1&amp;slug-hash=e7d3b934a8ce213384dc119106b71b7d&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed e7d3b934a8ce213384dc119106b71b7d\" title=\"CodePen Embed e7d3b934a8ce213384dc119106b71b7d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To make the child element positioned absolutely from its parent element we need to set this on the parent element itself:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  position: relative;\n}<\/code><\/pre>\n\n\n\n<p>Now properties such as <code>left<\/code>, <code>right<\/code>, <code>bottom<\/code> and <code>top<\/code> will refer to the parent element, so that if we make the child element transparent we can see it sitting right at the bottom of the parent:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_a8d5044672ee640eeb257d62c0d0156c\" src=\"\/\/codepen.io\/anon\/embed\/a8d5044672ee640eeb257d62c0d0156c?height=450&amp;theme-id=1&amp;slug-hash=a8d5044672ee640eeb257d62c0d0156c&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed a8d5044672ee640eeb257d62c0d0156c\" title=\"CodePen Embed a8d5044672ee640eeb257d62c0d0156c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">Learn more about <a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-practical-guide-position-relative-absolute?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\"><code>position: relative<\/code> and <code>position: absolute<\/code> at DigitalOcean<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-fixed\">Fixed<\/h3>\n\n\n<p>The <code>fixed<\/code> value is similar to <code>absolute<\/code> as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling. See the child element in the demo below and how, once you scroll, it continues to stick to the bottom of the page:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_e0e72fa57f387265fb7a3aa7a296d684\" src=\"\/\/codepen.io\/anon\/embed\/e0e72fa57f387265fb7a3aa7a296d684?height=450&amp;theme-id=1&amp;slug-hash=e0e72fa57f387265fb7a3aa7a296d684&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed e0e72fa57f387265fb7a3aa7a296d684\" title=\"CodePen Embed e0e72fa57f387265fb7a3aa7a296d684\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-fixed\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">7<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">3.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">3<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">8<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sticky\">Sticky<\/h3>\n\n\n<p>The <code>sticky<\/code> value is like a compromise between the <code>relative<\/code> and <code>fixed<\/code> values. As of this writing, it is currently an experimental value, meaning it is not part of the official spec and only partially adopted by select browsers. In other words, it&#8217;s probably not the best idea to use this on a live production website.<\/p>\n\n\n\n<p>What does it do? Well, it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a <code>fixed<\/code> value.<\/p>\n\n\n\n<p>Take the following example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  position: sticky; top: 50px;\n}<\/code><\/pre>\n\n\n\n<p>The element will be relatively positioned until the scroll location of the viewport reaches a point where the element will be <code>50px<\/code> from the top of the viewport. At that point, the element becomes sticky and remains at a <code>fixed<\/code> position <code>50px<\/code> top of the screen.<\/p>\n\n\n\n<p>The following demo illustrates that point, where the top navigation is default <code>relative<\/code> positioning and the second navigation is set to <code>sticky<\/code> at the very top of the viewport. Please note that the demo will only work in Chrome, Safari and Opera at the time of this writing.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ybVzeX\" src=\"\/\/codepen.io\/anon\/embed\/ybVzeX?height=450&amp;theme-id=1&amp;slug-hash=ybVzeX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ybVzeX\" title=\"CodePen Embed ybVzeX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-sticky\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">91<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">59<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">91<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">7.1*<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">8*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p class=\"is-style-explanation\">Learn more about <code><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-position-sticky?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\">position: sticky<\/a><\/code><a href=\"https:\/\/www.digitalocean.com\/community\/tutorials\/css-position-sticky?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_bestsellers\" rel=\"noopener\"> at DigitalOcean<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More Information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-16536\">\n\n  <time datetime=\"2012-03-18\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n      Video\n      <\/strong>\n\n    on\n\n    Feb 25, 2015  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/video-screencasts\/110-quick-overview-of-css-position-values\/\">\n      #110: Quick Overview of CSS Position Values    <\/a>\n  <\/h3>\n\n      <time>\u25b6 Running Time: <span>13:34<\/span><\/time>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2008-06-16\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 24, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/absolute-positioning-inside-relative-positioning\/\">\n      Absolute Positioning Inside Relative Positioning    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2008-10-14\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 13, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/absolute-relative-fixed-positioining-how-do-they-differ\/\">\n      Absolute, Relative, Fixed Positioning: How Do They Differ?    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2018-09-10\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 10, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/creating-sliding-effects-using-sticky-positioning\/\">\n      Creating sliding effects using sticky positioning    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/preethi\/\" aria-label=\"Author page of Preethi\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/f0607686c32fd18a7af74392a2652860?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/f0607686c32fd18a7af74392a2652860?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/preethi\/\">\n      Preethi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-16536\">\n\n  <time datetime=\"2019-02-25\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 25, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/dealing-with-overflow-and-position-sticky\/\">\n      Dealing with overflow and position: sticky;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-16536\">\n\n  <time datetime=\"2020-02-06\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 6, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/getting-fancy-with-position-sticky\/\">\n      Getting Fancy with position: sticky;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2020-09-02\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 14, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/how-to-use-css-grid-for-sticky-headers-and-footers\/\">\n      How to Use CSS Grid for Sticky Headers and Footers    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/adam-rackis\/\" aria-label=\"Author page of Adam Rackis\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/d4b0907c0d98a2394568d9bf9e8814c3?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/d4b0907c0d98a2394568d9bf9e8814c3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/adam-rackis\/\">\n      Adam Rackis    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2016-05-25\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 29, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/couple-takes-sticky-footer\/\">\n      Sticky Footer, Five Ways    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2019-07-12\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 5, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/position-sticky-and-table-headers\/\">\n      Position Sticky and Table Headers    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2016-11-09\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 21, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/position-sticky-2\/\">\n      position: sticky;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-16536\">\n\n  <time datetime=\"2019-02-04\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 4, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/more-like-position-tricky\/\">\n      More Like position: tricky;    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-16536\">\n\n  <time datetime=\"2011-04-05\" title=\"Originally published Mar 19, 2012\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 5, 2011  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/what-if-there-was-no-position-static\/\">\n      What if there was no position: static;?    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/position\/\" rel=\"tag\">position<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The position property can help you manipulate the location of an element, for example: Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just how much control this gives us (although this isn\u2019t a good idea [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1254],"acf":[],"jetpack-related-posts":[{"id":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":16536,"position":0},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15126,"url":"https:\/\/css-tricks.com\/snippets\/css\/smiley-slider\/","url_meta":{"origin":16536,"position":1},"title":"Smiley Slider","date":"November 20, 2011","format":false,"excerpt":"Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow. #face { width: 100px; height: 100px; position: relative; border: 2px\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194885,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-position\/","url_meta":{"origin":16536,"position":2},"title":"object-position","date":"February 3, 2015","format":false,"excerpt":"The CSS property object-position is used to align any selected replaced element (e.g., an <img>) within the box that contains it. img { object-position: right bottom; } An <img> element will align to bottom-right edge of its parent container with object-position: right bottom;. While it\u2019s probably most common to see\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/object-fit-element-container.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14123,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/transform\/","url_meta":{"origin":16536,"position":3},"title":"transform","date":"September 6, 2011","format":false,"excerpt":"The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling: .element { width: 20px; height: 20px; transform: scale(20); } Even with a declared height and width, this element will now be scaled to twenty times its original size: CodePen Embed Fallback Giving this function\u2026","rel":"","context":"With 57 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":16536,"position":4},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288037,"url":"https:\/\/css-tricks.com\/snippets\/css\/unordered-list-as-a-timeline\/","url_meta":{"origin":16536,"position":5},"title":"Unordered List as a Timeline","date":"May 20, 2019","format":false,"excerpt":"A refreshingly simple (yet crafty) way to create a vertical timeline using a straight-up, semantic unordered list () from Peter Cooper. ol { list-style-type: none; } li { position: relative; margin: 0; padding-bottom: 1em; padding-left: 20px; } li:before { content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left:\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16536"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16536"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16536\/revisions"}],"predecessor-version":[{"id":373937,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/16536\/revisions\/373937"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16536"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}