{"id":11198,"date":"2021-12-10T00:00:00","date_gmt":"2021-12-10T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2021\/12\/10\/belajar-css-position\/"},"modified":"2024-09-24T02:20:09","modified_gmt":"2024-09-24T02:20:09","slug":"belajar-css-position","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2021\/12\/10\/belajar-css-position\/","title":{"rendered":"Belajar CSS: Position"},"content":{"rendered":"<p>Pada artikel kali ini kita akan membahas posisi sebuah layout pada CSS dan artikel ini saya peruntukan untuk pemula.<\/p>\n<p>Posisi pada CSS terbagi menjadi beberapa tipe, yaitu sebagai berikut:<\/p>\n<ul>\n<li>Static (default)<\/li>\n<li>Relative<\/li>\n<li>Absolute<\/li>\n<li>Fixed<\/li>\n<li>Sticky<\/li>\n<\/ul>\n<p><strong>01. Static (default)<\/strong><br \/>\nBy default, element atau tag-tag HTML yang kita buat posisinya adalah static. Properti CSS seperti z-index, left, top, right, bottom, tidak akan berpengaruh nilainya terhadap element yang posisinya static.<\/p>\n<p><strong>02. Relative<\/strong><br \/>\nElement yang memiliki posisi relative, by default, posisinya seperti element dengan posisi static. Hanya saja pada posisi relative, element dapat diubah-ubah atau diatur posisinya dengan properti CSS z-index, bottom, left, right, top.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9848\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-30-at-09.53.10-768x215.png\" alt=\"\" width=\"768\" height=\"215\" \/><\/p>\n<p>Bisa dilihat pada gambar diatas, element dengan posisi relative dapat diatur posisinya dari posisi awalnya. Saya menambahkan element &lt;span&gt; pada text &#8220;has been the industry&#8217;s&#8221; sebagai contoh sederhananya.<\/p>\n<p><strong>03. Absolute<\/strong><br \/>\nPosisi absolute membuat posisi element-nya seperti melayang dan meninggalkan posisi awalnya. Bisa terlihat pada gambar di bawah ini perbandingannya dengan posisi relative.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9852\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-05.06.11-768x204.png\" alt=\"\" width=\"768\" height=\"204\" \/><\/p>\n<p>Posisi absolute, by default, akan menempel kepada element body jika parent element tidak diset posisinya menjadi relative. Bisa dilihat contoh kode berikut. Kalian bisa coba dengan menghilangkan <strong>position: relative\u00a0<\/strong>pada parent element.<\/p>\n<pre>&lt;div style=\"position: relative; width: 400px; height: 400px;\"&gt;\r\n\u00a0 \u00a0&lt;div style=\"position: absolute; top: 10px; left: 10px; z-index: 1; width: 40px; height: 40px; background-color: red\"&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Fyi, posisi absolute bisa digunakan sebagai image overlay, tooltip, ribbon, badge yang berada diatas element atau pun element yang bertumpuk.<\/p>\n<p><strong>04. Fixed<\/strong><br \/>\nPosisi fixed ini mirip dengan posisi absolute. Kalau tadi posisi absolute bisa melayang di dalam element parent (relative), posisi fixed tidak bisa melakukan itu dan akan langsung menempel ke element body namun tetap bisa melayang diposisi awal dengan memberi nilai property &#8220;auto&#8221; seperti &#8220;top: auto&#8221;. Bisa dilihat persamaan posisi absolute dan fixed.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9853\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-05.21.07-768x184.png\" alt=\"\" width=\"768\" height=\"184\" \/><\/p>\n<p>Dan berikut perbedaan posisi absolute dan fixed jika sama-sama diberikan element dengan posisi relative.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9854\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-05.24.09-768x263.png\" alt=\"\" width=\"768\" height=\"263\" \/><\/p>\n<p>Bisa dilihat perbedaannya kalau posisi absolute bisa berada di dalam parent elementnya, sedangkan posisi fixed menempel di element body. Dan ketika user melakukan scroll, element dengan posisi fixed akan tetap melayang sesuai dengan posisinya atau tidak hilang saat discroll. Posisi fixed biasanya digunakan untuk membuat sebuah popup.<\/p>\n<p><strong>05. Sticky<\/strong><br \/>\nPosisi yang terakhir adalah <strong>sticky<\/strong>. Kita bisa lihat terlebih dahulu gambar dibawah ini.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-9855\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2022\/02\/Screen-Shot-2022-02-14-at-05.32.37-768x249.png\" alt=\"\" width=\"768\" height=\"249\" \/><\/p>\n<p>Terlihat di sebelah kiri, posisi sticky mirip dengan posisi static, tidak ada yang berubah dengan posisinya. Element dengan posisi sticky baru akan terlihat ketika user melakukan scroll, terlihat di gambar sebelah kanan kalau elementnya selalu berada diposisi atas element parentnya. Kalau tadi posisi fixed tidak bisa berada di dalam element parent, posisi sticky adalah kebalikannya.<\/p>\n<p>Referensi: <a href=\"https:\/\/levelup.gitconnected.com\/css-for-beginners-position-4913ff17d1e5\">https:\/\/levelup.gitconnected.com\/css-for-beginners-position-4913ff17d1e5<\/a><br \/>\nFeatured image from <a href=\"https:\/\/unsplash.com\/photos\/ipARHaxETRk\">Unsplash<\/a> by <a href=\"https:\/\/unsplash.com\/@kobuagency\">KOBU Agency<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pada artikel kali ini kita akan membahas posisi sebuah layout pada CSS dan artikel ini saya peruntukan untuk pemula. Posisi pada CSS terbagi menjadi beberapa tipe, yaitu sebagai berikut: Static (default) Relative Absolute Fixed Sticky 01. Static (default) By default, element atau tag-tag HTML yang kita buat posisinya adalah static. Properti CSS seperti z-index, left, [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":11199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11198"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11198\/revisions"}],"predecessor-version":[{"id":11711,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11198\/revisions\/11711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11199"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}