{"id":2379,"date":"2021-12-26T20:27:47","date_gmt":"2021-12-26T17:27:47","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2379"},"modified":"2021-12-26T20:51:30","modified_gmt":"2021-12-26T17:51:30","slug":"css-position-property-and-use-cases","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/","title":{"rendered":"CSS ‘position’ Property and Use Cases"},"content":{"rendered":"\n

In CSS, position<\/strong> property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These;<\/p>\n\n\n\n

  1. static<\/code><\/li>
  2. relative<\/code><\/li>
  3. absolute<\/code><\/li>
  4. fixed<\/code><\/li>
  5. sticky <\/code><\/li>
  6. <\/li><\/ol>\n\n\n\n

    Now let’s see what effect these 5 values have on HTML elements. To see these effects, I prepared the following Html codes that have 3 boxes element and parent element.<\/p>\n\n\n\n

     <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document<\/title>\n    <style>\n        \/* Reset style *\/\n        html, body, div, span, applet, object, iframe,\n        h1, h2, h3, h4, h5, h6, p, blockquote, pre,\n        a, abbr, acronym, address, big, cite, code,\n        del, dfn, em, img, ins, kbd, q, s, samp,\n        small, strike, strong, sub, sup, tt, var,\n        b, u, i, center,\n        dl, dt, dd, ol, ul, li,\n        fieldset, form, label, legend,\n        table, caption, tbody, tfoot, thead, tr, th, td,\n        article, aside, canvas, details, embed,\n        figure, figcaption, footer, header, hgroup,\n        menu, nav, output, ruby, section, summary,\n        time, mark, audio, video {\n            margin: 0;\n            padding: 0;\n            border: 0;\n            font-size: 100%;\n            font: inherit;\n            vertical-align: baseline;\n        }\n        \/*POSITION EXAMPLE STYLE *\/\n        .parent-box{\n            margin: 10px;\n            width: 600px;\n            height: 210px;\n            display: flex;\n            justify-content: space-between;\n            background:  #998CEB;\n        }\n        .box-1{\n            margin: 30px;\n            width: 200px;\n            height: 150px;\n            background-color:#B4FE98;\n        }\n        .box-2{\n            margin: 30px;\n            width: 200px;\n            height: 150px;\n            background-color:#77E4D4;\n        }\n        .box-3{\n            margin: 30px;\n            width: 200px;\n            height: 150px;\n            background-color:#FBF46D;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class="parent-box">\n        <div class="box-1">\n        <\/div>\n        <div class="box-2">\n        <\/div>\n        <div class="box-3">\n        <\/div>\n    <\/div>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    1-) Static :<\/h3>\n\n\n\n
    HTML element is positioned in its normal flow position on the Web page. The position property of HTML elements is static<\/strong> by default. It does not respond to the top, bottom, left, right, and z-index<\/code> CSS properties.<\/p>\n\n\n\n
    2-) Relative :<\/h3>\n\n\n\n
    When we define position:relative<\/strong> property to the html element , it repositions according to its normal position. The element continues to take place in the normal flow of the web page, and no other element can occupy its place. In the code below, we have made the position property of the box-2 box relative. As seen in the picture, it has moved 20px down and to the right from its normal position.<\/p>\n\n\n\n
    .box-2{\n            margin: 30px;\n            width: 200px;\n            height: 150px;\n            background-color:#77E4D4;\n  \/*position: relative example*\/\n            top:20px;\n            left:20px;\n            position: relative;\n        }<\/pre><\/div>\n\n\n\n
    \"\"
    position:relative example<\/figcaption><\/figure><\/div>\n\n\n\n
    3-) Absolute:<\/h3>\n\n\n\n
    When we define position:relative<\/strong> property to the html element, it repositions according to its normal position. The element continues to take place in the normal flow of the web page, and no other element can occupy its place. In the code below, we have made the position property of box-2 box relative<\/strong>. As seen in the picture, it has moved 20px down and to the right from its normal position.<\/p>\n\n\n\n
    .box-2{\n            margin: 30px;\n            width: 200px;\n            height: 150px;\n            background-color:#77E4D4;\n  \/*position: relative example*\/\n            top:20px;\n            left:20px;\n            position: absolute;\n        }<\/pre><\/div>\n\n\n\n
    \"\"
    position:absolute example<\/figcaption><\/figure><\/div>\n\n\n\n
    4-) Fixed:<\/h3>\n\n\n\n
    When we define position:fixed<\/strong> property to the html element, the element exits the normal flow <\/strong>of the web page. The position of the web page visible on the screen (viewport) is determined according to top, bottom, left, right and z-index <\/code>CSS properties. The element will remain on the screen even if the display window is scrolled.<\/p>\n\n\n\n
    Viewport:\u00a0<\/strong>\u00a0the user’s visible area of a web page.<\/p>\n\n\n\n
    For example, on web pages, back to button<\/strong> can be done with the position:fixed<\/code> property.<\/p>\n\n\n\n
    <style>\n  .back-to-top {\n            position: fixed;\n            right: 2rem;\n            bottom: 2rem;\n            padding: 10px;\n            border-radius: 5px;\n        }\n<\/style>\n<body>\n    <button class="back-to-top">Back To Top<\/button>\n<\/body><\/pre><\/div>\n\n\n\n
    \"\"
    position:fixed<\/strong> \u00f6rne\u011fi<\/figcaption><\/figure><\/div>\n\n\n\n
    5-) Sticky: <\/h3>\n\n\n\n
    When we define position:sticky<\/strong> property to the html element, element will keep its normal position until the scroll bar comes, and when the scroll bar comes, it will act as position:fixed <\/code>on viewport<\/strong>.<\/p>\n\n\n\n
    <style>\n  .sticky-element{\n            text-align: center;\n            background-color: #77E4D4;\n            padding: 10px 0px;\n            font-size: 24px;\n            color:darkslateblue;\n            position: sticky;\n            top: 0;\n        }\n<\/style>\n<body>\n    <h1 class="sticky-element">Sticky Title<\/h1>\n<\/body><\/pre><\/div>\n\n\n\n
    \"\"
    position:sticky <\/strong>\u00f6zelli\u011fi kayd\u0131rma \u00e7ubu\u011fu ilk halinde<\/figcaption><\/figure>\n\n\n\n
    As seen in the picture below, when the scroll bar is moved down, sticky<\/strong> defined element stays on the top of the screen.<\/p>\n\n\n\n
    \"\"
    position:sticky property scrollbar moved down<\/figcaption><\/figure>\n\n\n\n
    In this post, I explained the frequently used and confusing position property in CSS.<\/p>\n\n\n\n
    Good Luck …<\/p>\n","protected":false},"excerpt":{"rendered":"
    In CSS, position property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These; static relative absolute fixed sticky Now let’s see what effect these 5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[80],"tags":[],"yoast_head":"\nCSS 'position' Property and Use Cases - blog website<\/title>\n<meta name=\"description\" content=\"In CSS, position property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These;staticrelativeabsolutefixedsticky Now let's see what effect these 5 values have on HTML elements. To see these effects, I prepared the following Html codes that have 3 boxes element and parent element.\" \/>\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.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS 'position' Property and Use Cases - blog website\" \/>\n<meta property=\"og:description\" content=\"In CSS, position property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These;staticrelativeabsolutefixedsticky Now let's see what effect these 5 values have on HTML elements. To see these effects, I prepared the following Html codes that have 3 boxes element and parent element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-26T17:27:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-26T17:51:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/image.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/image.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/12\/image.png\",\"width\":1010,\"height\":511},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/\",\"name\":\"CSS 'position' Property and Use Cases - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/#primaryimage\"},\"datePublished\":\"2021-12-26T17:27:47+00:00\",\"dateModified\":\"2021-12-26T17:51:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"In CSS, position property is used to determine how an element is positioned on the web page. In other words, it defines the position behavior of the element on the web page. CSS position property can take up to 5 different values. These;staticrelativeabsolutefixedsticky Now let's see what effect these 5 values have on HTML elements. To see these effects, I prepared the following Html codes that have 3 boxes element and parent element.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/2021\/12\/26\/css-position-property-and-use-cases\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ‘position’ Property and Use Cases\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2379"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=2379"}],"version-history":[{"count":52,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2379\/revisions"}],"predecessor-version":[{"id":2452,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2379\/revisions\/2452"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}