{"id":2454,"date":"2021-12-26T20:53:23","date_gmt":"2021-12-26T17:53:23","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=2454"},"modified":"2021-12-26T20:56:27","modified_gmt":"2021-12-26T17:56:27","slug":"css-position-property-and-use-cases-2","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/","title":{"rendered":"CSS ‘position’ \u00d6zelli\u011fi ve Kullan\u0131m \u00d6rnekleri"},"content":{"rendered":"\n

CSS ‘te position<\/strong> \u00f6zelli\u011fi, bir elementin web sayfas\u0131nda nas\u0131l konumland\u0131r\u0131laca\u011f\u0131n\u0131 belirlemek i\u00e7in kullan\u0131l\u0131r. Di\u011fer bir ifade ile elementin web sayfas\u0131ndaki konum davran\u0131\u015f\u0131n\u0131 tan\u0131mlar. CSS position \u00f6zelli\u011fi 5 farkl\u0131 de\u011fer alabilir. Bunlar;<\/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><\/ol>\n\n\n\n

    \u015eimdi bu 5 de\u011ferin Html elementlerinde nas\u0131l bir etkiye sahip olu\u011funu g\u00f6relim. Bu etkileri g\u00f6rmek i\u00e7in 3 kutu ve bir kapsay\u0131c\u0131dan olan a\u015fa\u011f\u0131daki Html kodlar\u0131n\u0131 haz\u0131rlad\u0131m.<\/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 elementi Web sayfas\u0131nda normal ak\u0131\u015f\u0131ndaki pozisyonuna konumlan\u0131r. Html elementlerin position \u00f6zelli\u011fi \u00f6n tan\u0131ml\u0131 olarak static<\/strong> ‘tir. olarak  top, bottom, left, right ve z-index<\/code> CSS \u00f6zelliklerine yan\u0131t vermez.<\/p>\n\n\n\n
    2-) Relative :<\/h3>\n\n\n\n
    Html elementine position:relative;<\/strong> \u00f6zelli\u011fi verdi\u011fimizde, normal konumuna g\u00f6re yeniden pozisyon al\u0131r. Element web sayfas\u0131n\u0131n normal ak\u0131\u015f\u0131nda yer almaya devam eder yerini ba\u015fka bir element i\u015fgal edemez. A\u015fa\u011f\u0131daki kodda box-2 kutusunun position \u00f6zelli\u011fini relative yapt\u0131k. Resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi normal konumundan a\u015fa\u011f\u0131 ve sola 20px  yer de\u011fi\u015ftirdi.<\/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 \u00f6rne\u011fi<\/figcaption><\/figure><\/div>\n\n\n\n
    3-) Absolute:<\/h3>\n\n\n\n
    Html elementine position:absolute;<\/strong> \u00f6zelli\u011fi verdi\u011fimizde, element en yak\u0131n ebeveyn elementine g\u00f6re yeniden konumlan\u0131r. top, bottom, left, right ve z-index<\/code> CSS \u00f6zelliklerine g\u00f6re konumu ebeveyn elementine g\u00f6re ayarlanabilinir. Element web sayfas\u0131n\u0131n normal ak\u0131\u015f\u0131nda yer almaz. A\u015fa\u011f\u0131daki \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi box-3 elementi box-2 elementin yerini alm\u0131\u015ft\u0131r. <\/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 \u00f6rne\u011fi<\/figcaption><\/figure><\/div>\n\n\n\n
    4-) Fixed:<\/h3>\n\n\n\n
    Html elementine position:fixed;<\/strong> \u00f6zelli\u011fi verdi\u011fimizde, element web sayfas\u0131n\u0131n normal ak\u0131\u015f\u0131ndan \u00e7\u0131kar. Web sayfas\u0131n\u0131n ekranda g\u00f6r\u00fcnen k\u0131sm\u0131nda(viewport)  top, bottom, left, right ve z-index<\/code> CSS \u00f6zelliklerine g\u00f6re konumu belirlenir. Ekran penceresi kayd\u0131r\u0131lsa bile element ekranda kalmaya devam edecektir.<\/p>\n\n\n\n
    Viewport: <\/strong>Sayfan\u0131n o anki g\u00f6r\u00fcnt\u00fc alan\u0131na viewport denir. <\/p>\n\n\n\n
    \u00d6rne\u011fin web sayfalar\u0131nda sayfan\u0131n ba\u015f\u0131na git butonu<\/strong> position:fixed<\/code> \u00f6zelli\u011fi ile yap\u0131labilinir.<\/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
    Html elementine position:sticky;<\/strong> \u00f6zelli\u011fi verdi\u011fimizde element kayd\u0131rma \u00e7ubu\u011fu gelene kadar normal konumunu koruyacak, kayd\u0131rma \u00e7ubu\u011fu gelince de ekranda position:fixed<\/code> gibi davranacakt\u0131r.<\/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
    A\u015fa\u011f\u0131daki resimde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi kayd\u0131rma \u00e7ubu\u011fu a\u015fa\u011f\u0131 indirildi\u011finde sticky tan\u0131ml\u0131 element ekran\u0131n tepesinde sabit olarak durmaktad\u0131r.<\/p>\n\n\n\n
    \"\"
    position:sticky <\/strong>\u00f6zelli\u011fi kayd\u0131rma \u00e7ubu\u011fu a\u015fa\u011f\u0131 kayd\u0131rlm\u0131\u015f hali<\/figcaption><\/figure>\n\n\n\n
    Bu yaz\u0131da CSS’ te s\u0131k\u00e7a kullan\u0131lan ve kafa kar\u0131\u015ft\u0131ran position \u00f6zelli\u011fini anlatt\u0131m.<\/p>\n\n\n\n
    Ba\u015far\u0131lar Dilerim …<\/p>\n","protected":false},"excerpt":{"rendered":"
    CSS ‘te position \u00f6zelli\u011fi, bir elementin web sayfas\u0131nda nas\u0131l konumland\u0131r\u0131laca\u011f\u0131n\u0131 belirlemek i\u00e7in kullan\u0131l\u0131r. Di\u011fer bir ifade ile elementin web sayfas\u0131ndaki konum davran\u0131\u015f\u0131n\u0131 tan\u0131mlar. CSS position \u00f6zelli\u011fi 5 farkl\u0131 de\u011fer alabilir. Bunlar; static relative absolute fixed sticky \u015eimdi bu 5 de\u011ferin Html elementlerinde nas\u0131l bir etkiye sahip olu\u011funu g\u00f6relim. Bu etkileri g\u00f6rmek i\u00e7in 3 kutu ve […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[82],"tags":[],"yoast_head":"\nCSS 'position' \u00d6zelli\u011fi ve Kullan\u0131m \u00d6rnekleri - 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\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS 'position' \u00d6zelli\u011fi ve Kullan\u0131m \u00d6rnekleri - 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\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-26T17:53:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-26T17:56:27+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=\"4 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\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/#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\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/\",\"name\":\"CSS 'position' \\u00d6zelli\\u011fi ve Kullan\\u0131m \\u00d6rnekleri - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/#primaryimage\"},\"datePublished\":\"2021-12-26T17:53:23+00:00\",\"dateModified\":\"2021-12-26T17:56:27+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\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/12\/26\/css-position-property-and-use-cases-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ‘position’ \\u00d6zelli\\u011fi ve Kullan\\u0131m \\u00d6rnekleri\"}]},{\"@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\/2454"}],"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=2454"}],"version-history":[{"count":2,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2454\/revisions"}],"predecessor-version":[{"id":2457,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/2454\/revisions\/2457"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=2454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=2454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=2454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}