{"id":117,"date":"2025-03-30T19:09:33","date_gmt":"2025-03-30T19:09:33","guid":{"rendered":"https:\/\/kingstatue.com\/?p=117"},"modified":"2025-03-30T19:09:33","modified_gmt":"2025-03-30T19:09:33","slug":"css-layout-position-property","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=117","title":{"rendered":"CSS\u00a0Layout &#8211; position\u00a0Property"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <code>position<\/code> property defines the positioning method for an element.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It supports five different values:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-588812cb16b57df0dc5bdd10ff8eea26\"><code>static<\/code><\/li>\n\n\n\n<li class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-9011b59dd7c83f265a521ea51e667f52\"><code>relative<\/code><\/li>\n\n\n\n<li class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-3242f35a2b1cf3d3e7bc2ee41f696be9\"><code>fixed<\/code><\/li>\n\n\n\n<li class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-4d885512b2e3d9604f04e470917f2b5e\"><code>absolute<\/code><\/li>\n\n\n\n<li class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-8beee9d8aa5837bab6577bf9dd02484b\"><code>sticky<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elements are positioned using the <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> properties.<\/li>\n\n\n\n<li>These properties only work when the <code>position<\/code> property is set.<\/li>\n\n\n\n<li>The behavior of <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> varies based on the <code>position<\/code> value.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\">position: static; (default)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is the <strong>default position<\/strong> for all HTML elements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The element follows the normal document flow.<\/li>\n\n\n\n<li>It <strong>ignores<\/strong> properties like <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code>.<\/li>\n\n\n\n<li><strong>When to use?<\/strong><\/li>\n\n\n\n<li>Use <code>static<\/code> when you want elements to appear naturally in the document flow without modifying their position.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.box1 {\n    position: static; \/* Default value *\/\n    top: 50px; \/* Won't work *\/\n    left: 50px; \/* Won't work *\/\n    border: 3 px solid black;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;position: static;&lt;\/h2&gt;\n\n&lt;p&gt;An HTML element with position: static; &lt;\/p&gt;\n\n&lt;div class=\"box1\"&gt;\nI am a relative box with position: static; I am always positioned according to the normal flow of the page. I am not positioned in any special method\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">position: relative<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">The element is positioned <strong>relative to its normal position<\/strong>.<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The properties <code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code> move it <strong>from its original position<\/strong>, but <strong>other elements are not affected<\/strong> or adjusted to fit into any space left.<\/li>\n\n\n\n<li><strong>When to use?<\/strong><\/li>\n\n\n\n<li>When you want to <strong>nudge<\/strong> an element slightly from its normal position.<\/li>\n\n\n\n<li>When using <code>absolute<\/code> inside a <code>relative<\/code> parent (more on this below).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.box2 {\n    position: relative;\n    top: 20px; \/* Moves 20px down from its original position *\/\n    left: 30px; \/* Moves 30px to the right *\/\n    background-color: blue;\n}\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;position: relative;&lt;\/h2&gt;\n\n&lt;p&gt;An HTML element with position: relative; &lt;\/p&gt;\n\n&lt;div class=\"box2\"&gt;\nI am a relative box with position: relative; I am positioned relative to my normal position.\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: absolute;<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The element is positioned <strong>relative to the nearest positioned ancestor<\/strong> (an ancestor with position: <code>relative<\/code>, <code>absolute<\/code>, or <code>fixed<\/code>).<\/li>\n\n\n\n<li>If no ancestor is positioned, it positions <strong>relative to <code>&lt;body&gt;<\/code> (the whole page)<\/strong> and moves along with page scrolling.<\/li>\n\n\n\n<li><strong>How absolute position works<\/strong><\/li>\n\n\n\n<li><strong>It is positioned relative to the nearest positioned ancestor.<\/strong><\/li>\n\n\n\n<li>If a parent element has <code>position: relative;<\/code>, <code>absolute;<\/code>, or <code>fixed;<\/code>, the absolute element will use that as its reference for positioning.<\/li>\n\n\n\n<li><strong>If there are no positioned ancestors, it is positioned relative to <code>&lt;body&gt;<\/code>.<\/strong><\/li>\n\n\n\n<li>The element moves <strong>with page scrolling<\/strong> because the body is the reference.<\/li>\n\n\n\n<li><strong>It is removed from the normal document flow.<\/strong><\/li>\n\n\n\n<li>The element <strong>does not affect<\/strong> the positions of other elements.<\/li>\n\n\n\n<li>Other elements behave as if the absolutely positioned element <strong>does not exist<\/strong>.<\/li>\n\n\n\n<li><strong>It can overlap other elements.<\/strong><\/li>\n\n\n\n<li>Since it&#8217;s removed from the normal flow, it can be placed anywhere, even overlapping other elements.<\/li>\n\n\n\n<li><strong>When to use?<\/strong><\/li>\n\n\n\n<li>When you want an element <strong>inside a container<\/strong> but positioned freely.<\/li>\n\n\n\n<li>When you want to <strong>overlay<\/strong> elements on top of others.<\/li>\n\n\n\n<li>\u2714 <strong>Best practice:<\/strong> Always use <code>absolute<\/code> inside a <code>relative<\/code> container to control its positioning.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example 1: Positioned to a relative container<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.container {\n    position: relative;\n    width: 400px;\n    height: 300px;\n    background-color: lightgray;\n}\n\n.box {\n    position: absolute;\n    top: 50px;\n    left: 100px;\n    background-color: coral;\n    width: 150px;\n    height: 100px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;position: absolute;&lt;\/h2&gt;\n\n&lt;p&gt;An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the html document)&lt;\/p&gt;\n\n&lt;div class=\"container\"&gt; I am a relative container with position: relative;\n  &lt;div class=\"box\"&gt;I am an Absolute Box with position: absolute; I am positioned relative to my parent container &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Example 2: Without a Positioned Ancestor (Relative to <code>&lt;body><\/code>)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">No parent has <code>position: relative;<\/code>, so <code>.absolute-box<\/code> <strong>positions itself relative to <code>&lt;body&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>top: 50px; left: 100px;<\/code> means:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The box moves <strong>50px from the top of the page<\/strong>.<\/li>\n\n\n\n<li>The box moves <strong>100px from the left of the page<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It <strong>moves along with page scrolling<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;style&gt;\n        .absolute-box {\n            position: absolute;\n            top: 50px;\n            left: 100px;\n            width: 200px;\n            height: 100px;\n            background-color: lightcoral;\n            border: 2px solid red;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"absolute-box\"&gt;I am an Absolute Box!&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Example 3: With a Positioned Ancestor (<code>position: relative;<\/code>)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>.container<\/code> has <code>position: relative;<\/code>, so it becomes the <strong>reference<\/strong> for <code>.absolute-box<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>.absolute-box<\/code> now positions itself <strong>relative to <code>.container<\/code><\/strong>, not <code>&lt;body&gt;<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>top: 50px; left: 100px;<\/code> means:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The box moves <strong>50px from the top of <code>.container<\/code><\/strong>.<\/li>\n\n\n\n<li>The box moves <strong>100px from the left of <code>.container<\/code><\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>It does not move with page scrolling<\/strong> because it\u2019s inside <code>.container<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;style&gt;\n        .container {\n            position: relative;\n            width: 400px;\n            height: 300px;\n            background-color: lightblue;\n            margin: 50px;\n        }\n\n        .absolute-box {\n            position: absolute;\n            top: 50px;\n            left: 100px;\n            width: 200px;\n            height: 100px;\n            background-color: lightcoral;\n            border: 2px solid red;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"absolute-box\"&gt;I am an Absolute Box!&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Example 4: Overlapping Other Elements<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>.absolute-box<\/code> <strong>overlaps<\/strong> <code>.box2<\/code> because it is <strong>removed from the normal flow<\/strong>.<\/li>\n\n\n\n<li><code>.box2<\/code> behaves <strong>as if <code>.absolute-box<\/code> does not exist<\/strong>, so it does not get pushed down.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;style&gt;\n        .box1 {\n            width: 300px;\n            height: 100px;\n            background-color: lightgreen;\n            margin-bottom: 10px;\n        }\n\n        .absolute-box {\n            position: absolute;\n            top: 50px;\n            left: 100px;\n            width: 200px;\n            height: 100px;\n            background-color: lightcoral;\n            border: 2px solid red;\n        }\n\n        .box2 {\n            width: 300px;\n            height: 100px;\n            background-color: lightblue;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"box1\"&gt;I am Box 1 (Static Position)&lt;\/div&gt;\n    &lt;div class=\"absolute-box\"&gt;I am an Absolute Box!&lt;\/div&gt;\n    &lt;div class=\"box2\"&gt;I am Box 2 (Static Position)&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Practical Use Cases of <code>position: absolute;<\/code><\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 <strong>Creating UI elements that float over content (e.g., modals, tooltips, dropdown menus).<\/strong><br>\u2705 <strong>Positioning elements inside a container without affecting other elements (e.g., placing a logo in a fixed spot).<\/strong><br>\u2705 <strong>Custom layouts where elements are positioned freely inside a section.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">position: fixed;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The element is positioned <strong>relative to the viewport<\/strong> (browser window).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It <strong>does not move when scrolling<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is <strong>removed from the normal document flow<\/strong>, meaning other elements <strong>are not affected<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For <strong>sticky navigation bars<\/strong> (<code>top: 0px;<\/code>).<\/li>\n\n\n\n<li>For <strong>floating chat buttons<\/strong> (bottom-right corner).<\/li>\n\n\n\n<li>For <strong>popups or notifications<\/strong> that stay in place while scrolling.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.box {\n    position: fixed;\n    bottom: 10px;\n    right: 10px;\n    background-color: yellow;\n    padding: 10px;\n}\n\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h2&gt;position: fixed;&lt;\/h2&gt;\n\n&lt;p&gt;An element with position: fixed; is positioned relative to the viewport. When the page is scrolled, it always stays in the same place :&lt;\/p&gt;\n\n&lt;div class=\"fixed\"&gt;\nI am an element with fixed position\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">position: sticky;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This element is <strong>like relative<\/strong> at first but becomes <strong>fixed<\/strong> after scrolling a certain distance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>When to use?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For <strong>sticky headers<\/strong> that stay visible at the top of the page while scrolling.<\/li>\n\n\n\n<li>For <strong>section titles<\/strong> that remain visible until the next section.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.sticky {\n  position: sticky;\n  top: 0;\n  padding: 5px;\n  background-color: darkorange;\n  border: 2px solid darkgray;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;Scroll &lt;b&gt;and see&lt;\/b&gt; how sticky positioning works.&lt;\/p&gt;\n\n&lt;div class=\"sticky\"&gt;I am sticky!&lt;\/div&gt;\n\n&lt;div style=\"padding-bottom:2000px\"&gt;\n  &lt;p&gt;When you scroll down, the above sticky element sticks to the top of the page (top: 0).&lt;\/p&gt;\n  &lt;p&gt;To remove the sticky, scroll up .&lt;\/p&gt;\n  &lt;p&gt;Sample text AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\n    CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC.\n    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD.\n    EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE\n    FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF\n    GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG\n  &lt;\/p&gt;\n  &lt;p&gt;Sample text AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA. BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\n    CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC.\n    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD.\n    EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE\n    FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF\n    GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG\n  &lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Real-World Usage Scenarios<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\ud83d\udd39 When to use <code>relative<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Adjusting an element slightly from its original place.<br>\u2705 Creating a <strong>parent for <code>absolute<\/code> elements<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd39 <strong>Example<\/strong>: Keeping a button slightly off-center.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;style&gt;\n        .button {\n    position: relative;\n    left: 20px;\n}\n\n    &lt;\/style&gt;\n    &lt;title&gt;Document&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;button class=\"button\"&gt;I am a relative Button&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>When to use <code>absolute<\/code>?<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Positioning an element <strong>inside a specific container<\/strong>.<br>\u2705 Overlapping elements like <strong>modals, tooltips, dropdowns<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd39 <strong>Example<\/strong>: Placing a tooltip over a button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Tooltip Example&lt;\/title&gt;\n    &lt;style&gt;\n        body {\n            font-family: Arial, sans-serif;\n            text-align: center;\n            margin-top: 100px;\n        }\n        .tooltip-container {\n            position: relative;\n            display: inline-block;\n        }\n        .tooltip {\n            visibility: hidden;\n            width: 150px;\n            background-color: black;\n            color: #fff;\n            text-align: center;\n            padding: 8px;\n            border-radius: 5px;\n            position: absolute;\n            bottom: 125%;\n            left: 50%;\n            transform: translateX(-50%);\n            opacity: 0;\n            transition: opacity 0.3s;\n        }\n        .tooltip-container:hover .tooltip {\n            visibility: visible;\n            opacity: 1;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"tooltip-container\"&gt;\n        &lt;button&gt;Hover over me&lt;\/button&gt;\n        &lt;div class=\"tooltip\"&gt;This is a tooltip!&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">When to use <code>fixed<\/code>?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Creating a <strong>sticky navigation bar<\/strong>.<br>\u2705 Making <strong>floating buttons<\/strong> (like WhatsApp chat).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd39 <strong>Example<\/strong>: Keeping a floating chat button in the bottom-right.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.chat-button {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">When to use <code>sticky<\/code>?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Keeping headers visible while scrolling (navigation header).<br>\u2705 Making <strong>section titles stick<\/strong> at the top (Example in table).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udd39 <strong>Example<\/strong>: Making a table header stay visible.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>th {\n    position: sticky;\n    top: 0;\n    background: white;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <strong><code>relative<\/code><\/strong> when you want an element to <strong>move slightly from its normal position<\/strong>.<\/li>\n\n\n\n<li>Use <strong><code>absolute<\/code><\/strong> when you want an element <strong>inside another element but freely positioned<\/strong>.<\/li>\n\n\n\n<li>Use <strong><code>fixed<\/code><\/strong> for elements that should <strong>stay visible while scrolling<\/strong>.<\/li>\n\n\n\n<li>Use <strong><code>sticky<\/code><\/strong> when an element should <strong>stick at a position while scrolling<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The position property defines the positioning method for an element. It supports five different values: position: static; (default) This is the default position for all HTML elements. position: relative The&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[37,44,49,67,71,76,78],"class_list":["post-117","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet","tag-absolute","tag-css","tag-fixed","tag-position","tag-relative","tag-static","tag-sticky"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=117"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/117\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}