{"id":53162,"date":"2025-02-06T14:48:54","date_gmt":"2025-02-06T07:48:54","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=53162"},"modified":"2025-02-06T14:51:07","modified_gmt":"2025-02-06T07:51:07","slug":"belajar-css-bagian-14","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-14\/","title":{"rendered":"Belajar CSS Bagian 14: Mengenal Properti CSS Position"},"content":{"rendered":"\n

Dalam belajar CSS bagian 13, kita telah belajar tentang apa itu properti CSS Display<\/a> beserta contoh implementasinya. Pada seri lanjutan belajar CSS bagian ke 14 ini, kita akan belajar mengenal apa itu properti CSS position<\/em> beserta contoh dan penggunaannya.<\/p>\n\n\n\n\n\n

Apa itu Properti CSS Position<\/em>?<\/h2>\n\n\n\n

CSS position <\/em>adalah properti dalam CSS yang digunakan untuk mengatur penempatan elemen di halaman website. Properti ini memungkinkan agar elemen diposisikan relatif terhadap elemen lain, viewport<\/em>, atau dokumen, sehingga tata letak menjadi lebih fleksibel. <\/p>\n\n\n\n

Fungsinya, mencakup pembuatan navigasi tetap (sticky<\/em>) serta elemen overlay <\/em>seperti modal dan tooltip<\/em>. Selain itu, properti position <\/em>bekerja bersama dengan top<\/em>, right<\/em>, bottom<\/em>, dan left <\/em>untuk menentukan lokasi spesifik elemen. Nilai yang digunakan pada position <\/em>akan memengaruhi bagaimana elemen berinteraksi dalam tata letak halaman.<\/p>\n\n\n\n

Nilai Dasar Properti CSS Position<\/em><\/h2>\n\n\n\n

Berikut adalah beberapa nilai dasar yang sering digunakan pada properti CSS position<\/em>:<\/p>\n\n\n\n

1. Static<\/h3>\n\n\n\n

Nilai static <\/em>untuk properti css position <\/em>adalah nilai default<\/em>. Elemen HTML akan ditempatkan sesuai posisi dokumen HTML secara normal tanpa ada properti tambahan seperti properti: top, left, right, bottom. Berikut contoh kode CSS:<\/p>\n\n\n\n

.static {\n  position: static;\n}<\/code><\/pre>\n\n\n\n
2. Relative<\/h3>\n\n\n\n
Nilai relative <\/em>untuk properti css position <\/em>adalah nilai untuk memposisikan elemen HTML secara relatif terhadap posisi semula. Anda dapat menggeser posisi elemen HTML menggunakan properti tambahan seperti top, left, right, bottom. Berikut contoh kode CSS:<\/p>\n\n\n\n
.relative {\n  position: relative;\n  top: 10px;\n  left: 10px\n}<\/code><\/pre>\n\n\n\n
3. Absolute<\/h3>\n\n\n\n
Nilai absolute <\/em>akan memposisikan elemen HTML secara relatif terhadap elemen induk (ancestor<\/em>) terdekat yang memiliki position <\/em>selain static<\/em>. Berikut contoh kode css :<\/p>\n\n\n\n
.absolute {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n}<\/code><\/pre>\n\n\n\n
4. Fixed<\/h3>\n\n\n\n
Nilai fixed <\/em>akan memposisikan elemen HTML secara relatif terhadap viewport <\/em>(ukuran layar). Dan akan tetap berada di tempat yang sama meskipun pengunjung website menggulir atau melakukan scrolling <\/em>halaman. Berikut contoh kode css :<\/p>\n\n\n\n
.fixed {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n}<\/code><\/pre>\n\n\n\n
5. Sticky<\/h3>\n\n\n\n
Nilai sticky <\/em>merupakan kombinasi dari nilai relative <\/em>dan fixed<\/em>. Elemen HTML akan tetap dalam posisi relatif hingga mencapai batas tertentu, kemudian menjadi seperti elemen fixed<\/em>. nilai sticky Sering digunakan untuk header <\/em>atau navigasi yang “menempel” saat di-scroll. Berikut contoh kode CSS:<\/p>\n\n\n\n
.sticky {\n  position: sticky;\n  top: 0;\n  background-color: yellow;\n}<\/code><\/pre>\n\n\n\n
Nilai Global Properti CSS Position<\/h2>\n\n\n\n
Selain nilai dasar, ada juga nilai global pada properti CSS position <\/em>seperti:<\/p>\n\n\n\n
1. Inherit<\/h3>\n\n\n\n
Nilai inherit<\/em> akan Mengambil nilai properti position <\/em>dari elemen induknya. Berikut contoh kode CSS:<\/p>\n\n\n\n
.inherit  {\n  position: inherit ;\n}<\/code><\/pre>\n\n\n\n
2. Initial<\/h3>\n\n\n\n
Nilai initial <\/em>akan mengembalikan nilai properti position <\/em>ke nilai default <\/em>(static<\/em>). Berikut contoh kode CSS:<\/p>\n\n\n\n
.initial {\n  position: initial ;\n}<\/code><\/pre>\n\n\n\n
3. Unset<\/h3>\n\n\n\n
Nilai unset <\/em>akan menghapus nilai properti elemen. Bertindak seperti inherit jika properti diwariskan atau initial jika tidak. Berikut contoh kode CSS:<\/p>\n\n\n\n
.unset {\n  position: unset ;\n}<\/code><\/pre>\n\n\n\n
Contoh Implementasi CSS Display<\/h2>\n\n\n\n
Berikut adalah contoh script<\/em> CSS position <\/em>yang telah diterapkan ke kode html.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title>Contoh CSS Display<\/title>\n    <style>\n.container {\n  height: 200px;\n  padding: 10px;\n}\n\n.box {\n  margin: 5px;\n  padding: 10px;\n  background-color: blue;\n}\n\n.static {\n  position: static;\n  background-color: fuchsia;\n}\n\n.relative {\n  position: relative;\n  top: 10px;\n}\n\n.absolute {\n  position: absolute;\n  top: 40px;\n  left: 30px;\n  background-color: red;\n}\n\n.fixed {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  background-color: chartreuse;\n}\n\n.sticky {\n  position: sticky;\n  top: 0;\n  background-color: yellow;\n}\n    \n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"container\">\n        <div class=\"box static\">Static<\/div>\n        <div class=\"box relative\">Relative<\/div>\n        <div class=\"box absolute\">Absolute<\/div>\n        <div class=\"box fixed\">Fixed<\/div>\n        <div class=\"box sticky\">Sticky<\/div>\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Kemudian jika di testing <\/em>di browser <\/em>untuk akan menampilkan screenshoot <\/em>seperti berikut:<\/p>\n\n\n\n
\"CSS<\/a><\/figure>\n\n\n\n
Kesimpulan<\/h2>\n\n\n\n
CSS position <\/em>sangat penting untuk mengatur tata letak elemen pada halaman web. Dengan memahami berbagai nilai position<\/em>, pengembang dapat menciptakan desain yang dinamis, fleksibel, dan sesuai kebutuhan, baik itu untuk tata letak sederhana maupun kompleks.<\/p>\n\n\n\n
Demikian artikel belajar CSS bagian ke 14 tentang CSS position<\/em>. Ikuti terus seri belajar CSS selanjutnya, untuk meningkatkan kemampuan CSS Anda. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Dalam belajar CSS bagian 13, kita telah belajar tentang apa itu properti CSS Display beserta contoh implementasinya. Pada seri lanjutan belajar CSS bagian ke 14 ini, kita akan belajar mengenal apa itu properti CSS position beserta contoh dan penggunaannya. Apa itu Properti CSS Position? CSS position adalah properti dalam CSS yang digunakan untuk mengatur penempatan […]<\/p>\n","protected":false},"author":353,"featured_media":53179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[7],"tags":[1752,1751,2186],"class_list":{"0":"post-53162","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/02\/Banner-belajar-css-bagian-14.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-dPs","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/53162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=53162"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/53162\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/53179"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=53162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=53162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=53162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}