{"id":135042,"date":"2024-02-22T14:51:23","date_gmt":"2024-02-22T09:21:23","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=135042"},"modified":"2024-04-12T14:34:56","modified_gmt":"2024-04-12T09:04:56","slug":"css-position-static-relative-fixed-absolute-sticky-examples","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/","title":{"rendered":"CSS Position Static Relative Fixed Absolute Sticky Examples"},"content":{"rendered":"\n

Positioning Elements with CSS: Mastering Static, Relative, Fixed, Absolute, and Sticky<\/strong><\/h2>\n\n\n\n

Forget metaphors, dive straight into the practical world of CSS positioning! This guide empowers you to control element placement on your webpages using different positioning properties: static, relative, fixed, absolute, and sticky.<\/p>\n\n\n\n

Understanding the Options<\/strong><\/p>\n\n\n\n

    \n
  1. Static (default): Elements follow the normal document flow, stacking vertically based on their order in the HTML code.

    <\/li>\n\n\n\n
  2. Relative: Elements stay in their initial position, but you can offset them using properties like top, right, bottom, and left. Offsets are relative to the element’s original position.

    <\/li>\n\n\n\n
  3. Fixed: Elements are removed from the normal document flow and positioned relative to the viewport (browser window). They stay in the same position even when you scroll.

    <\/li>\n\n\n\n
  4. Absolute: Elements are removed from the normal flow and positioned relative to their nearest positioned ancestor (or the viewport if none exists). Absolute positioning allows flexible and complex layouts.

    <\/li>\n\n\n\n
  5. Sticky: Elements behave like relative elements initially, but become fixed when scrolled past a certain point. Think of a navigation bar sticking to the top of the page as you scroll down.

    <\/li>\n<\/ol>\n\n\n\n

    Code Examples<\/strong><\/p>\n\n\n\n

    HTML<\/p>\n\n\n\n

    <div class=”container”><\/p>\n\n\n\n

      <div class=”static”>I’m static, following the flow.<\/div><\/p>\n\n\n\n

      <div class=”relative”>I’m relative, moved 20px down.<\/div><\/p>\n\n\n\n

      <div class=”fixed”>I’m fixed, always visible top right.<\/div><\/p>\n\n\n\n

      <div class=”absolute”>I’m absolute, positioned 50px from top and left.<\/div><\/p>\n\n\n\n

    <\/div><\/p>\n\n\n\n

    CSS<\/p>\n\n\n\n

    .container {<\/p>\n\n\n\n

      position: relative; \/* Set a reference point for absolute positioning *\/<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    .static {<\/p>\n\n\n\n

      background-color: #f5f5f5;<\/p>\n\n\n\n

      padding: 20px;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    .relative {<\/p>\n\n\n\n

      background-color: #ccc;<\/p>\n\n\n\n

      padding: 20px;<\/p>\n\n\n\n

      position: relative;<\/p>\n\n\n\n

      top: 20px;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    .fixed {<\/p>\n\n\n\n

      background-color: #007bff;<\/p>\n\n\n\n

      color: white;<\/p>\n\n\n\n

      padding: 20px;<\/p>\n\n\n\n

      position: fixed;<\/p>\n\n\n\n

      top: 0;<\/p>\n\n\n\n

      right: 0;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    .absolute {<\/p>\n\n\n\n

      background-color: #ff9900;<\/p>\n\n\n\n

      color: white;<\/p>\n\n\n\n

      padding: 20px;<\/p>\n\n\n\n

      position: absolute;<\/p>\n\n\n\n

      top: 50px;<\/p>\n\n\n\n

      left: 50px;<\/p>\n\n\n\n

    }<\/p>\n\n\n\n

    Remember<\/strong><\/p>\n\n\n\n

      \n
    • Choose the positioning property that best suits your layout requirements and desired element behavior.<\/li>\n\n\n\n
    • Experiment with combinations to achieve complex layouts.<\/li>\n\n\n\n
    • Consider potential performance implications of fixed and absolute positioning.<\/li>\n\n\n\n
    • Practice accessibility guidelines for users with assistive technologies.<\/li>\n<\/ul>\n\n\n\n

      By mastering these positioning properties, you unlock the power to create dynamic and well-structured web page layouts, taking your design skills to the next level!<\/p>\n\n\n\n

      Go back to tutorial<\/strong><\/h4>\n","protected":false},"excerpt":{"rendered":"

      Positioning Elements with CSS: Mastering Static, Relative, Fixed, Absolute, and Sticky Forget metaphors, dive straight into the practical world of CSS positioning! This guide empowers you to control element placement on your webpages using different positioning properties: static, relative, fixed, absolute, and sticky. Understanding the Options Code Examples HTML <div class=”container”>   <div class=”static”>I’m static,…<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[5743],"tags":[],"class_list":["post-135042","page","type-page","status-publish","hentry","category-web-development"],"acf":[],"yoast_head":"\nCSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial<\/title>\n<meta name=\"description\" content=\"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T09:04:56+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/\",\"name\":\"CSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-02-22T09:21:23+00:00\",\"dateModified\":\"2024-04-12T09:04:56+00:00\",\"description\":\"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Position Static Relative Fixed Absolute Sticky Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial","description":"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/","og_locale":"en_US","og_type":"article","og_title":"CSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial","og_description":"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T09:04:56+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/","name":"CSS Position Static Relative Fixed Absolute Sticky Examples - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-02-22T09:21:23+00:00","dateModified":"2024-04-12T09:04:56+00:00","description":"Boost your chances and get ready to become a Vskills Certified Front-End Web Developer. Become job ready now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/css-position-static-relative-fixed-absolute-sticky-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"CSS Position Static Relative Fixed Absolute Sticky Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/135042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=135042"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/135042\/revisions"}],"predecessor-version":[{"id":135195,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/135042\/revisions\/135195"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=135042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=135042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=135042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}