CSSMateri CourseNusantech Academy

Modul 3-8 CSS Display & Positioning

By 20 Mei 2020 Juni 3rd, 2020 No Comments

Halo, apa kabar teman-teman?

Jumpa lagi bersama kami di course HTML & CSS Nusantech Academy. Setelah sebelumnya kita berkenalan dengan Box Model, kini kita akan belajar mengenai dasar Display & Position dalam CSS.

Display & Position 

Display dan Position berperan sebagai pengatur tata letak elemen HTML. Memang bukan hal yang mudah untuk memahami Property Display dan Position ini, karena dalam mengatur layout terkadang hasil yang kita harapkan malah diluar dugaan. 

Pada percobaan-percobaan sebelumnya, pasti teman-teman tau dong, kalau tampilan HTML dan CSS kita dieksekusi dari atas kebawah. Nah itu adalah sifat bawaan dari HTML & CSS. Tapi, bagaimana kalau kita ingin, elemen kita dirender kesamping seperti halnya navigasi yang biasa kita lihat? Atau mungkin elemen yang ingin kita tempatkan pada posisi tertentu? Untuk menjawab pertanyaan itu, mari kita simak lebih lanjut.

Display

Display adalah Property yang mengatur bagaimana elemen seharusnya ditampilkan. Untuk lebih jelasnya berikut nilai Display yang dasar beserta sifat-sifatnya. 

  • Display: inline

Inline, cukup mudah untuk diingat. Seperti namanya nilai inline digunakan untuk merender elemen kesamping. Namun elemen yang memiliki Property Display: inline tidak dapat menerima nilai Width dan Height, jika ditambah margin atau padding pun nilai yang bertambah hanya ke samping/horizontal.

Elemen yang menggunakan nilai Default Display: inline antara lain:

  • <image>
  • <span>
  • <a>

Contoh:

Kode HTML:

<body>
        <div class="satu"> Item 1 </div>
        <div class="dua"> Item 2 </div>
    <span> Nusantech </span>
    <span> Academy </span>
</body>

Kode CSS:

.satu {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline;
        }
        
.dua {
        width: 100px;
        height: 100px;
        background-color: grey;
        display: inline;
        }

Hasil:

Tanpa margin & padding:

Dengan margin & padding:

Walau diberi Height dan Width berapapun Display: inline tidak akan menambah lebar dan tinggi.

  • Display: block

Display: block kebalikan dari inline. Display block menampilkan elemen-elemen kita kebawah tidak sejajar seperti satu garis layaknya inline. display: block juga menerima nilai Width, Height, Padding, dan Margin. Banyak elemen yang biasa teman-teman gunakan yang memiliki nilai Default Block, diantaranya:

  • <div>
  • <p>
  • <header>
  • <footer>
  • <h1> – <h6>
  • <form>
  • <section>

Contoh:

Kode HTML:

<body>
        <div class="satu"> Item 1 </div>
        <div class="dua"> Item 2 </div>
    <h1> Nusantech </h1>
    <p> Academy </p>
</body>

Kode CSS:

.satu {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: block;
        }
        
.dua {
        width: 100px;
        height: 100px;
        background-color: grey;
        display: block;
        }

Hasil:

  • Display: inline-block

Display: inline-block tidak akan membuat perpecahan, justru nilai ini melengkapi satu sama lain. Semisal kita menginginkan tampilan elemen menyamping maka display: inline-block ini adalah pilihan yang tepat. Kita bisa mengatur Height, Width, Padding, dan Margin layaknya display: block, namun dengan elemen yang dirender menyamping seperti Display: inline.

Contoh:

Kode HTML:

<body>
        <div class="satu"> Item 1 </div>
        <div class="dua"> Item 2 </div>
    <p> Nusantech Academy </p>
</body>

Kode CSS:

p {
        display: inline-block;
        }
        
.satu {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline-block;
        }
        
.dua {
        width: 100px;
        height: 100px;
        background-color: grey;
        display: inline-block;
        }

Hasil:

  • Display: none

Umm… none. Iya tidak ada apa apa. elemen dengan display: none menghilang dari layout kita.

Ada banyak forum yang membahas antara property display: none vs visibility: hidden. Keduanya jelas sangat berbeda walaupun tujuannya sama, menyembunyikan elemen.

Dalam visibility: hidden, elemen kita transparan total namun tetap memakan tempat, sedangkan elemen dengan display: none benar-benar akan membuat elemen menghilang tanpa meninggalkan space/ruang.

Display: none dan visibility: hidden  biasa digunakan dengan JavaScript untuk menciptakan halaman HTML yang interaktif.  Teman-teman akan mempelajarinya di course JavaScript Nusantech Academy.

  • Display: flex & grid

Kedua pembahasan Display ini akan kita bahas khusus di pembahasan berikutnya.

Position

Position berfungsi dalam memanipulasi penempatan elemen milik kita. Sebenarnya bukan cuma posisi sih, namun juga interaksi antar elemen itu sendiri. Nilai position berikut ini juga mesti teman-teman pahami

 Nilai Property Position:

  • Position: static

Position Static merupakan nilai bawaan semua elemen HTML. Sifat dari Position: static ini mengalir sesuai nilai Property Display. Jika sebuah elemen memiliki Property display: inline maka position: static akan ikut di render horizontal, begitu pula dengan nilai Property Display lainnya. 

Position: static juga tidak menerima nilai dari Property Top, Bottom, Left, Right, maupun z-index.

  • Position: relative

Dasarnya sama seperti Static, namun position: relative menerima nilai dari Property top, bottom, left, right, dan z-index. Property top, right, bottom, atau left berfungsi menambahkan pixel/jarak kosong tambahan pada sebuah elemen. Hampir mirip dengan Padding atau Margin namun 4 property ini tidak terbatasi oleh lebar tinggi Parent/induk/kontainernya 

Misal nya:

Kode CSS:

selector{
    width: 300px;
    height: 300px;
    background-color: pink;
    left: 200px;
}

Hasil:

Elemen diatasi memiliki Property left: 200px, tapi kenapa tidak ada space sebesar 200px?

Itu karena memang nilai default Position-nya static. Jika kita tambah dengan position: relative, maka hasilnya:

Seperti yang diharapkan, elemen bergeser 200px dari titik kiri awal.

  • Position: absolute

Position: absolute ini agak berbeda dengan dua nilai Position sebelumnya. Position absolute tidak mengikuti alur/flow dimana elemen di render. Ketika ada elemen Child/anak yang memiliki nilai absolute maka elemen ini seperti diabaikan letaknya oleh Parent Element/Container. Kita bebas memposisikan elemen ini, akan tetapi, elemen dengan position: absolute tetap berada dalam lingkup Container nya.

Contoh

Kode HTML:

<div class="parent">
    <div class="children"> Children </div>
    <p> Ini adalah contoh teks paragraf yang sangat panjang  </p>
</div>

Kode CSS:

.parent{
    width: 300px;
    height: 300px;
    background-color: pink;
    position: relative;
}

.children{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
}

Hasil:

Dari gambar diatas tampak Container mengabaikan elemen Children, menganggapnya nihil. Dengan begitu kita bebas memposisikan elemen ini.

  • Position: fixed

Sama seperti Absolute, elemen dengan Position fixed memiliki sifat dapat diletakkan dimana saja. Namun yang berbeda adalah walaupun halaman web kita  discroll kebawah, elemen tersebut akan tetap mengikuti jendela browser kita alias diam ditempat.

Kode CSS:

.kuning {
    width: 100%;
    height: 100px;
    background-color: yellow;
    position: fixed;
    top: 10px;
}

Hasilnya:

Setelah discroll ke bawah

Elemen dengan position: fixed seperti pada gambar di atas akan mengikuti kemana layar discroll

  • Position: sticky

Position: sticky ini sifatnya unik. Seperti gabungan antara position: relative dengan position: fixed. Kita bisa memposisikan elemen ini seperti menggunakan position: relative, namun ketika kita scroll sampai ke titik dimana elemen tersebut diletakkan, elemen itu akan mulai  mengikuti jendela browser kita seperti halnya position: fixed.

Kode CSS:

.kuning {
    width: 100%;
    height: 100px;
    background-color: yellow;
    position: sticky;
    top: 10px;
}

Hasil:

Setelah discroll

Ketika kita scroll ke atas, ke posisi semula, maka elemen tersebut juga akan kembali ke tempat semula.

Penutup

Belajar Display dan Position memang awalnya agak membingungkan dan kadang perlu solusi tricky untuk memecahkan masalah layout kita. Karena itu, teman-teman perlu banyak latihan dan mengulang materi yang telah dipelajari. Jika teman-teman ada pertanyaan atau saran silahkan isi kolom komentar dibawah ya

Dalam pembahasan selanjutnya kita akan coba berkenalan dengan CSS Floats. Tetap semangat!

See you next time!

Leave a Reply