Tutorial_HTML.pdf

Complete Tutorial Understanding CSS Position - As we know, CSS Position consists of 4 values, namely static, relative, absolute, and fixed. By default, the tags that we create already have a value of position:static. 
Tutorial Lengkap Memahami CSS Positions

Transcript

1. Css Config Axis Opok 7 Mei 2022 Config Opok Semua Operator 5 Mei Home / Terpopuler May 7 — 01 Table of Contents Config Axis Opok 7 Mei 2022 - Hari ini saya akan update… May 5 — 02 Home Kategori About Contact Kontributor Alat
2. Tutorial Lengkap Memahami Css Position Tutorial Lengkap Memahami Css Position - Seperti yang kita tahu, CSS Position itu terdiri dari 4 nilai, yaitu static, relative, absolute, dan fixed. Secara default, tag-tag yang kita buat itu udah punya nilai position:static. POSITION:STATIC Position:static itu adalah tipe posisi paling normal yang mengalir begitu aja. Dalam jumlah yang banyak, tag tipe display block dengan position static akan terus mengalir ke bawah,, sedangkan tag tipe display inline akan terus mengalir ke samping seperti biasa. Contoh: 2022 Config Axis Opok 1-2 Mei 2022 Config Http Custom Opok 12 Maret 2022 | All Operator Show more Asep Rohimat Updated: March 27, 2022 · 7 min read Share: Share Share Tweet <h1>Display Static</h1> <div class="static">block</div> <div class="static">block</div> <div class="static">block</div> <br> May 1 — 03 Mar 12 — 04 Labels Aplikasi 13 APN 5 Apple ID 1 Backlink 2 Blog 45 Cara 37 (+17) Listed on LetMePost Letmepost
3. Inilah hasil tampilan position:static; <br> <span class="static">inline</span> <span class="static">inline</span> <span class="static">inline</span> .static{ width:100px; height:125px; background:#0cf; margin:10px; /*POSITION:STATIC tidak perlu dibuat, karena secara defaultnya sudah static*/ }
4. Sayangnya position:static ini punya kelemahan, position static tidak mempunyai sifat container yang bisa menampung position:absolute didalamnya dengan baik. Sehingga position:static ini biasanya hanya digunakan di tag-tag yang tidak mempunyai anak lagi. Maksudnya apa? Nanti dijelaskan di bawah.. : POSITION:RELATIVE Position:relative adalah jenis position yang paling banyak digunakan. Memiliki sifat yang sama
5. dengan position:static yang mengalir, akan tetapi perbedaannya position:relative ini bisa mengatur posisinya dengan bantuan property top, left, right, bottom. Patokan property keempat arah tersebut adalah item itu sendiri. Sehingga misalnya item dengan position:relative diberi property top:50px berarti memberikan jarak kosong 50px diatas item tersebut. sekarang masih di file HTML yang sama kita tambahkan : <!--Kode yang tadi dilanjutin..--> <!--......--> <br> <br> <h2>Display Relative</h2> <div class="relative">block</div> .relative{ width:100px; height:125px; background:#cf0; position:relative; }
6. Hasilnya nanti akan sama saja seperti display:static, tidak ada yg istimewa. Hanya muncul sebuah div lagi dibawahnya yang terus mengalir ke bawah.. Perbedaannya baru terlihat ketika kita menambahkan di CSSnya property ini nih .. Perbandingan position:relative tanpa property arah dan dengan tambahan property arah seperti ini (semoga gambarnya bisa dimengerti) ^_^'a : .relative{ /*css yang tadi*/ ... /*top / left / right / bottom dengan nilai sembarangan*/ top:50px; left:200px; }
7. Jadi disini terlihat satu keunikan position:relative ya,, sekalipun position:relative ini sama-sama mengalir seperti display:static, tapi position:relative ini bisa diatur juga posisinya dengan property 4 arah tersebut. Dan keunikan lagi 1, position:relative ini memiliki sifat container artinya dapat menampung tag dengan position:absolute dengan baik. Sehingga, position:relative ini sangat cocok digunakan untuk tag-tag yang masih memiliki anak lagi.. Untuk lebih jelasnya, perhatikan di poin Position:Absolute sekarang ini ! POSITION:ABSOLUTE position:absolute ini adalah jenis posisi yang fungsinya paling powerful. Berbeda dengan
8. position:static dan position:relative yang terus mengalir, position:absolute ini cenderung tidak mengisi ruangan seperti 2bposition lainnya, dan diam ditempat jika beberapa tag dengan position:absolute ini berbarengan. Wajar saja, karena fungsi position:absolute sendiri adalah meletakkan item dengan posisi yang bisa diatur seenaknya kita.. Sama seperti position:relative, position:absolute ini dibarengi dengan property 4 arah (top, left, right, bottom). Akan tetapi bedanya kalau di position relative titik 0pxnya adalah item itu sendiri (lihat gambar diatas), sedangkan di position:absolute ini titik 0pxnya adalah layer yang bersifat container yang ada di parentnya, atau kalau tidak ada layer container sama sekali, maka pojokkan browser sendiri lah yang menjadi titik 0pxnya. Untuk lebih jelasnya, kita buatkan juga dibawah proyek HTML kita.. <!--Tag-tag lama tadi...--> <br> <br> <h2>Display Absolute</h2> <div class="absolute">block</div> <div class="absolute">block</div> .absolute{
9. Hasilnya nanti seperti ini : "Hmm,, ada yang aneh.. perasaan tag HTMLnya ada 2 div deh,, kok yang muncul cuma 1?" Yah,, itulah position:absolute.. Karena position:absolute tidak mengalir seperti position:static dan relative.. Sekarang kita akan melihat hubungan position:absolute dengan layer container yang tidak lain adalah layer dengan position:relative; position:absolute; width:100px; height:125px; background:#f00; }
10. Pertama-tama kita lanjutkan dulu tag HTML kita seperti ini : Sekarang kita membuat 2 layer dengan position yang berbeda. Position yang diluar (parent) sebagai relative, dan position didalam (child) sebagai absolute. Kita coba buat CSSnya seperti ini: <!--Tag HTML tadi dibiarkan--> <br> <br> <br> <br> <br> <br> <h2>Display Absolute didalam Relative</h2> <div class="relative2"> <div class="absolute2"> </div> </div> .relative2{ position:relative; /*lebar dan tinggi bebas aja, tapi dibuat agak besar */ width:500px; 7
11. Nah, hasilnya nanti seperti ini : Sampai disini position:absolute hasilnya masih biasa-biasa aja ya.. Sekarang biar perbandingannya jelas, kita kasi property arah di layer .absolute2 itu, jadi seperti ini : height:300px; background:#ccc; } .absolute2{ position:absolute; width:200px; height:100px; background:#000; } .absolute2{ /*CSS yang tadi*/ ...
12. Hasilnya nanti seperti ini : right:100px; pada layer dengan position:absolute akan membuat layer tersebut berjarak 100px dari kanan container. Karena dalam hal ini layer parent (.relative2) bertindak sebagai container, maka 100px dari kanan tersebut dihitung mulai dari titik merah seperti di gambar. Bagaimana kalau layer .relative2 tersebut tidak diberikan position apapun alias static? Coba saja kita hapus position:relative; di layer .relative2,, dan hasilnya akan menjadi seperti ini: right:100px;/*<-- Ini nih yang bantu kita lihat perbedaannya*/ }
13. Seperti yang kita lihat, karena layer .relative2 tidak lagi bertindak sebagai container sejak position:relativenya dihapus., karena itulah position:absolute dapat membuat item tersebut keluar dari layer static ketika diberikan property arah (top, right, bottom, left),, dan ujung browser itu sendiri yang menjadi patokan titik nol seperti yang kita lihat pada gambar. Tentunya hal ini mengganggu layout kita, karena itu memang sebaiknya position:absolute itu digunakan hanya didalam tag yang bersifat relative supaya posisi lebih rapi dan mudah diatur. Sama seperti position:relative, position absolute ini juga punya sifat container, sehingga layer dengan position:absolute masih bisa menampung layer absolute lain didalamnya dengan rapi. POSITION:FIXED Nah, sekarang kita masuk ke jenis position terakhir yang paling unik dan nggak mungkin ketuker-tuker dengan position yang lain. Position:fixed ini memungkinkan kita meletakkan elemen
14. secara permanen di suatu titik yang tetap diam sekalipun kita ngescroll browser kita sampe manapun. Saya pernah buat tutorial yang menggunakan implementasi dari position fixed ini, yaitu di tutorial Membuat Layout Fix Header. Position:fixed ini juga sering kita temukan di facebook / twitter yang headernya diam di tempat. Untuk mengerti konsepnya, kita buat HTMLnya seperti ini : Sekarang kita lihat hasilnya,, <!--HTML yang tadi--> .... <br> <br> <h2>Display Fixed</h2> <div class="fixed"></div> .fixed{ position:fixed; width:500px; height:100px; background:#ffcc00; top:50px; /*50px dari atas browser*/ left:200px; /*200px dari kiri browser*/ }
15. Nah,, itu dia keunikan position:fixed.. Sebagai catatan, position:fixed ini juga bersifat container, sehingga layer didalamnya tersebut masih bisa menampung position:absolute dengan baik. KESIMPULAN Kesimpulan terakhirnya sederhana, masing-masing position punya keunikannya masing-masing, yang digunakan sesuai kebutuhan kita. Kalau kita butuh layer yang peletakannya mengalir yang nggak perlu bersifat container, gunakan STATIC. Kalau kita mau layer yang peletakannya mengalir dan bersifat container, gunakan RELATIVE. Kalau mau layer yang nggak perlu mengalir dan letaknya seenak jidat, gunakan ABSOLUTE. Dan kalau butuh layer yang diam di tempat dalam keadaan apapun, gunakan FIXED.
16. Semoga artikel ini membantu kita memahami penggunaan position dengan baik.. :-) Asep Rohimat Post a Comment Posted by "Saya hanyalah orang biasa yang gemar membaca, cita-cita ingin mendapatkan passive income tanpa kerja di kantoran" You may like these posts Tutorial Lengkap Memahami Css Position No image Tutorial Lengkap Memahami Css Position - Seperti yang… Nov 5, 2021 Asep Media Blogger Tentang Asep Blogs Produk Domain Murah Partner Made with coffee by Company – Product & Service – Support –
17. --> Blogs Asep Media Blogger Mengulas Berbagai Informasi Seputar Techno, Internet Gratis, Tips Dan Tricks Blogger, Tutorial Blogger Pemula, Jasa Optimasi Blog. Asep Business Warkop Asep Rohimat Ikuti Kami Di Google News Facebook / Instagram / Twitter / Youtube / Telegram / Pinterest – – – © 2022 ‧ Asep Media Blogger. All rights reserved. Top
18. PDFmyURL.com - convert URLs, web pages or even full websites to PDF online. Easy API for developers!