# Belajar Positioning untuk Navbar dan Footer - Part 4
💡
Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆
# Overview
Sebuah website gak jauh dari navbar dan sebuah navbar gak jauh dari positioning pada CSS, kalau kita mengaca pada konsep dasar positioning CSS Layout, kita akan kenal istilah berikut:
* `static`
* `relative`
* `fixed`
* `absolute`
* `sticky`
Nah sekarang kita akan nyobain membuat navbar pada tailwind.
# Kick Off
Kita masih menggunakan kode yang digunakan pada tutorial sebelumnya:
```xml
Hello Tailwind
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
```
Sekarang kita ubah sedikit kodenya supaya kita bisa membuat sebuah navbar sederhana:
```xml
```
Sekarang website kamu akan kaya gini bentuknya.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712524251611/0acea119-e4b2-43d6-8daa-20559e80b8ab.png align="center")
> Bang kok gak full sih navbar kan full
Itu kan saya pake class container ya, makanya dia nyesuain lebarnya cuma segitu, kalau kamu mau full ya hapus aja container classnya, ini kan nyontohin doang.
Jangan lupa hapus juga `rounded-bl-lg` dan `rounded-br-lg` untuk bikin bagian bawah kanan dan kiri jadi bulet gitu biar keren.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712524369907/da3ef0c8-d950-4d78-a000-8627d27b83bc.png align="center")
Tapi saya mah pake container aja ya, terserah kalian mau ikut apa gak.
Nah sekarang tugas kalian adalah memperbanyak konten biar bisa discroll kaya begini.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712524573368/2481488b-06a6-45db-99f5-987b243baabf.gif align="center")
Gak perlu diajarin dong cara bikinnya gimana? Tinggal copy aja satu div dan paste terus-terusan.
---
Nah as simple as the docs kita bisa atur positioningnya lewat panduan [ini](https://v2.tailwindcss.com/docs/position). Sekarang kita ubah code navnya agar menjadi seperti ini:
```xml
```
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712525165782/969915e4-762e-4e3e-84bc-9d17edbb01f7.gif align="center")
Secara umum sebuah website menggunakan navbar dalam bentuk sticky dimana navbar tersebut akan mengikuti seiring dengan pengguna saat melakukan scroll.
Apa fungsi class `inset-x-0` dan `top-0`? Berdasarkan dokumentasi dari [tailwind](https://v2.tailwindcss.com/docs/top-right-bottom-left), kita dapat mengatur posisi sebuah komponen dengan mudah.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712534712813/2fdddb8d-8046-4c3f-aeed-28cd72a6cc8f.png align="center")
Class `inset-x-0` berfungsi untuk mengatur jarak elemen atau komponen secara horizontal, karena kita menggunakan x. Nah karena kita pake `inset-x-0`, maka jarak antara kanan dan kiri menjadi 0 dan otomatis elemen ini bisa mengikuti jarak yang ditentukan pada elemen di dalamnya. Sedangkan class `top-0` membuat jarak ke bagian atas menjadi 0px, artinya sangat rapat ke bagian atas.
# Footer
Setelah nyobain bagaimana navbar (navigation bar) dibuat, kita perlu memikirkan bagaimana cara membuat footer. Pada dasarnya footer akan berada di bawah dan tidak akan bergerak. Kita bisa saja membuatnya dengan cara seperti ini.
```xml
.
.
.
```
Sekarang tampilannya menjadi seperti ini.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712534399977/817726c9-6e16-48c4-b50d-ac76bfdcb5bb.gif align="center")
Ada yang aneh? Tentu, karena footernya terus berada di bawah pada saat kita melakukan scroll. Tentu saja untuk sebuah aplikasi web berbasis desktop, hal ini sangat tidak masuk akal.
Tampilan di atas cocok untuk diimplementasikan untuk web yang berfokus pada tampilan mobile, sehingga kita seolah-olah membuat menu yang menempel di bawah.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712536695029/d7ebe284-eaf9-4920-9a4d-3f4d99d85c28.gif align="center")
Sayangnya, ini tidak cocok untuk desktop. Lalu bagaimana memperbaikinya? Ganti saja class `fixed` pada footer menjadi `relative`.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712535012020/82b0a754-2304-4dc1-9982-98b121a8c21f.gif align="center")
Lalu mungkin saja ada pertanyaan dari kalian, pada saat kalian mengurangi konten di dalamnya, entah kenapa footer tiba-tiba naik ke atas.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712535066101/f4368b5b-6196-423b-a4a0-81c10ade7d76.png align="center")
Mengapa hal ini dapat terjadi? Tentu, karena footer mengisi ruang kosong di dalamnya dan ini **sangatlah wajar**. Bagaimana cara mengatasinya? Sebelum saya jawab, kita pahami dulu teorinya.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712535257279/a6bd0193-046a-4999-8a0f-0b9aeae21da3.png align="center")
Secara teori inilah yang terjadi pada web buatan kita, dapat dilihat bahwa screen yang besar hanya diisi oleh tiga konten saja. Selain itu pada element content, datanya hanya sedikit sehingga otomatis tinggi dari elemen tersebut otomatis mengikuti tinggi keseluruhan konten. Elemen footer naik karena elemen tersebut mengisi ruang kosong dikarenakan tinggi dari elemen content sangatlah pendek.
Artinya, apabila pada bagian element content hanya sedikit konten saja yang dibuat, sangat wajar apabila elemen footer tiba-tiba naik ke atas.
Bagaimana cara mengatasinya? Sederhananya, ya kita harus mengisi kontennya. Secara teori tidak mungkin kita membuat website dimana website tersebut hanya berisi sedikit konten, pasti saja elemen pada bagian content akan panjang ke bawah dan dipisahkan dengan beberapa section. Namun, sebenarnya secara teori kita bisa mengatasinya.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712535911208/3db6e35d-5b76-47b0-9bfb-37b2337804f6.png align="center")
Pertama, kita ubah dulu body-nya agar memiliki tinggi minimal sebesar screen.
```xml
```
Class `flex-col` dan `min-h-screen` berperan penting dalam bagian ini, karena `flex-col` membuat susunan elemen di dalamnya menjadi berbaris secara vertikal dan `min-h-screen` membuat ukuran elemen di dalamnya berukuran tinggi minimal sebesar screen yang membuka halaman tersebut, sehingga elemen didalamnya dipaksa mengisi ruang kosong.
Kemudian pada bagian footer, kita perlu hilangkan **positioningnya dan diberi class**`mt-auto`. Hal ini bertujuan agar footer dapat mengikuti konten yang perlu diisi, apabila diberi positioning maka elemen akan keluar dari tempat yang seharusnya.
Class `mt-auto` juga berperan penting dalam membuat footer ke bagian bawah, dengan mengatur margin pada bagian atas antara footer dengan elemen div di atasnya, footer jadi dipaksa untuk mengisi ruang kosong pada bagian bawah. Hal ini menyebabkan otomatis footer akan terus berada di bawah.
```xml
```
Sekarang walaupun kamu mengisi banyak maupun sedikit konten, footer akan terus berada di bawah.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712538642201/8d23a39e-f210-45c2-b0da-bc8202af84f9.gif align="center")
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712538709475/9b711133-74cf-4a5c-9a4b-16b45fc57d86.gif align="center")
Berikut merupakan keseluruhan kode.
```xml
Hello Tailwind
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
Hello World
Lorem ipsum sir dolor amet
```
Jadi bagaimana? Tidak sulit kan membuat navbar maupun footer pada tailwind? 😄