Geser elemen dari posisi normalnya pada HTML dengan position relative CSS

null

15 min red

September 22, 2025

Properti position relative pada CSS merupakan salah satu mekanisme penting dalam mengatur tata letak elemen pada halaman web. Dengan properti ini, elemen dapat dipindahkan dari posisi normalnya tanpa kehilangan ruang yang telah dialokasikan di dalam aliran dokumen. Hal ini memungkinkan pengembang untuk mengatur penempatan elemen secara lebih fleksibel dibandingkan hanya mengandalkan posisi normal. Penerapan position relative sering kali menjadi dasar sebelum menggunakan teknik lanjutan seperti absolute atau fixed. Dengan kata lain, konsep ini bukan sekadar teori, melainkan pondasi praktis dalam membangun struktur web modern (Meyer, 2006).

Selain fungsi teknisnya, position relative memiliki potensi besar dalam membangun interaksi visual yang dinamis. Pengembang dapat memanfaatkannya untuk menyesuaikan jarak, mengatur tata letak responsif, hingga memberikan ruang bagi pseudo-elemen. Kelebihan ini membuatnya relevan dalam pengembangan antarmuka yang tidak hanya statis tetapi juga adaptif. Dalam praktik desain web, fleksibilitas ini dapat memberikan pengalaman pengguna yang lebih nyaman. Oleh karena itu, pemahaman yang baik terhadap position relative sangatlah penting (Duckett, 2011).

Dari sisi perkembangan, position relative tidak dapat dilepaskan dari evolusi CSS sebagai bahasa gaya. Ketika CSS pertama kali diperkenalkan, fokusnya adalah pada pemisahan antara konten dan tampilan. Namun, kebutuhan akan tata letak yang lebih kompleks mendorong pengembangan properti ini agar mendukung desain yang responsif dan konsisten. Keberadaannya menunjukkan bagaimana CSS beradaptasi dengan kebutuhan industri digital. Dengan demikian, mempelajari properti ini juga berarti memahami perjalanan CSS sebagai sebuah teknologi (Robbins, 2018).

Dalam konteks industri saat ini, penerapan position relative membuka peluang bagi pengembang untuk membangun halaman web yang lebih profesional. Banyak framework modern tetap mendasarkan sistem grid atau komponen pada mekanisme dasar seperti ini. Jika pengembang menguasai penggunaannya, mereka akan lebih mudah beradaptasi dengan kebutuhan desain web yang berubah-ubah. Kemampuan ini juga dapat meningkatkan efisiensi pengembangan sekaligus mengurangi ketergantungan pada library eksternal. Maka dari itu, properti ini bukan hanya konsep teknis, melainkan keterampilan praktis yang perlu dimiliki (Cederholm, 2010).

2. Kenapa Penting

Fleksibilitas Tata Letak

Penggunaan position relative sangat penting karena memberikan fleksibilitas dalam mengatur tata letak elemen di halaman web. Properti ini memungkinkan elemen tetap berada dalam aliran dokumen, tetapi posisinya dapat digeser sesuai kebutuhan. Dengan demikian, pengembang bisa menyesuaikan tampilan tanpa harus mengubah struktur HTML yang ada. Fleksibilitas ini mempermudah penyesuaian desain pada berbagai resolusi layar. Selain itu, elemen yang diposisikan relatif dapat dijadikan titik referensi untuk elemen lain yang menggunakan absolute positioning. Dengan cara ini, position relative menjadi pondasi dalam menciptakan tata letak kompleks (Duckett, 2011).

Fleksibilitas ini juga terlihat pada penerapan desain responsif. Saat ukuran layar berubah, elemen dengan position relative tetap menjaga aliran dokumen sekaligus memberi ruang untuk pergeseran visual. Hal ini berbeda dengan absolute yang cenderung keluar dari aliran dokumen dan bisa mengganggu tata letak. Karena itu, pengembang dapat lebih aman menggunakan relative sebagai dasar sebelum beralih ke teknik yang lebih kompleks. Keseimbangan antara kontrol dan keteraturan membuat properti ini sangat penting dipahami. Dengan pemahaman mendalam, fleksibilitas tersebut dapat digunakan untuk berbagai skenario desain (Meyer, 2006).

Lebih jauh, fleksibilitas ini meningkatkan efisiensi dalam mengelola elemen. Ketika tata letak berubah, pengembang tidak perlu membongkar ulang struktur HTML. Sebaliknya, mereka cukup memanfaatkan properti relative untuk memberikan penyesuaian kecil. Dengan cara ini, waktu pengembangan lebih hemat dan potensi kesalahan berkurang. Hal ini juga memudahkan kerja tim, terutama pada proyek besar dengan banyak halaman. Singkatnya, fleksibilitas dari position relative tidak hanya memengaruhi estetika, tetapi juga efisiensi kerja (Robbins, 2018).

Dukungan untuk Elemen Lain

Alasan penting lainnya adalah karena position relative berfungsi sebagai acuan bagi elemen lain. Misalnya, jika sebuah elemen anak menggunakan position absolute, maka posisinya akan ditentukan relatif terhadap elemen induk yang memiliki position relative. Mekanisme ini memungkinkan pengembang mengatur hubungan antar elemen secara hierarkis. Tanpa penggunaan relative, elemen absolute biasanya akan mengacu pada halaman secara keseluruhan. Dengan kata lain, relative menciptakan sistem koordinat yang lebih terkendali (Cederholm, 2010).

Dukungan ini sangat berguna dalam membangun komponen web yang modular. Misalnya, pada pembuatan card, tombol, atau tooltip, penggunaan relative memastikan bahwa setiap elemen anak tetap terikat pada induknya. Hal ini menghindari terjadinya tampilan yang berantakan saat ukuran layar berubah. Pengembang dapat lebih percaya diri dalam mengatur tata letak karena elemen sudah memiliki acuan yang jelas. Dukungan antar elemen ini juga meningkatkan keterbacaan kode CSS. Dengan struktur yang konsisten, pemeliharaan kode menjadi lebih mudah (Duckett, 2011).

Selain itu, dukungan antar elemen ini memperkuat konsep scalability dalam desain web. Komponen yang dibuat dengan dasar relative lebih mudah digunakan kembali di bagian lain proyek. Hal ini memungkinkan pengembang untuk membangun sistem desain yang konsisten. Pada akhirnya, praktik ini mendukung keberlanjutan proyek jangka panjang. Tanpa adanya kontrol seperti ini, risiko kesalahan visual akan lebih besar. Karena itu, position relative menjadi solusi praktis untuk menjaga konsistensi desain (Meyer, 2006).

Meminimalkan Kesalahan Tata Letak

Pentingnya position relative juga terlihat dari kemampuannya meminimalkan kesalahan tata letak. Elemen yang menggunakan properti ini tetap menjaga ruang dalam aliran dokumen. Dengan begitu, perubahan posisi tidak mengganggu elemen lain di sekitarnya. Hal ini berbeda dengan absolute yang sering kali membuat elemen menumpuk dan sulit dikontrol. Dengan kata lain, relative membantu menjaga stabilitas desain halaman web (Robbins, 2018).

Kesalahan tata letak sering muncul pada proyek dengan banyak komponen interaktif. Jika tidak hati-hati, elemen bisa saling bertabrakan atau melompat keluar dari area yang diinginkan. Dengan position relative, risiko tersebut lebih kecil karena pergeseran hanya berlaku pada elemen itu sendiri. Properti ini memberikan keseimbangan antara fleksibilitas dan keteraturan. Oleh sebab itu, penggunaannya sangat disarankan dalam tahap awal desain. Hal ini sekaligus mempermudah proses debugging bila terjadi kesalahan (Cederholm, 2010).

Selain itu, penggunaan relative dapat mempermudah kolaborasi antar desainer dan pengembang. Dengan stabilitas tata letak, setiap orang dalam tim dapat bekerja tanpa khawatir merusak struktur global. Hasilnya, workflow menjadi lebih teratur dan efisien. Kesalahan yang mungkin terjadi pun lebih cepat ditemukan karena elemen tetap dalam alur dokumen. Hal ini menjadikan position relative pilihan yang aman sekaligus strategis. Maka dari itu, properti ini tidak bisa diabaikan dalam praktik CSS (Duckett, 2011).

3. Konsep Dasar

Position relative pada CSS merupakan salah satu nilai dari properti position yang memiliki karakteristik unik. Secara default, elemen HTML berada dalam aliran normal dokumen, tetapi dengan relative, posisinya dapat digeser menggunakan properti seperti top, left, right, dan bottom. Pergeseran ini hanya memengaruhi tampilan visual elemen tanpa mengubah ruang yang ditempatinya dalam aliran dokumen. Hal ini membuat relative berbeda dengan absolute, yang sepenuhnya keluar dari aliran dokumen. Dengan kata lain, elemen relative tetap menjaga tempat aslinya meskipun sudah dipindahkan secara visual (Duckett, 2011).

Selain menjaga aliran dokumen, position relative berfungsi sebagai acuan untuk elemen lain. Elemen anak yang diberi position absolute akan mengikuti posisi relatif induknya. Dengan mekanisme ini, pengembang dapat membangun tata letak yang lebih kompleks tanpa merusak struktur HTML. Misalnya, ketika membuat tooltip atau label tambahan, penggunaan relative pada induk memastikan posisi anak tetap konsisten. Hal ini menjadikan relative bukan hanya alat untuk memindahkan elemen, tetapi juga pondasi bagi desain modular. Oleh sebab itu, pemahaman konsep ini sangat penting dalam praktik CSS (Robbins, 2018).

Untuk memahami lebih baik, mari lihat contoh sederhana:

.box {
  position: relative;
  top: 20px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

Dalam contoh di atas, .box akan tetap berada pada alur dokumen, tetapi tampilannya bergeser 20 piksel ke bawah dan 30 piksel ke kanan. Meski bergeser, ruang asli yang ditempati elemen tetap ada, sehingga elemen lain di sekitarnya tidak ikut terdorong. Hal ini memperlihatkan bagaimana relative menjaga keseimbangan antara fleksibilitas dan keteraturan. Oleh karena itu, penggunaannya sering dipilih saat pengembang ingin melakukan pergeseran visual kecil (Meyer, 2006).

Lebih jauh, penggunaan relative membantu menjaga konsistensi antar elemen dalam desain yang dinamis. Ketika layout berubah karena ukuran layar berbeda, elemen dengan relative tetap menyesuaikan aliran dokumen sambil mempertahankan posisinya. Ini sangat mendukung prinsip desain responsif, di mana setiap elemen harus fleksibel namun tetap stabil. Jika hanya mengandalkan absolute, tata letak bisa berantakan saat ukuran layar berubah drastis. Dengan demikian, position relative menjadi bagian dari strategi penting dalam menciptakan desain web modern yang berorientasi pada pengalaman pengguna. Dengan pemahaman ini, relative dapat dimanfaatkan secara maksimal (Cederholm, 2010).

4. Jenis dan Contoh

a. Pergeseran Sederhana dengan relative

Jenis paling dasar dari position relative adalah pergeseran sederhana menggunakan properti top, left, right, atau bottom. Dalam praktiknya, elemen tetap berada di dalam aliran dokumen, namun tampilannya digeser sesuai nilai yang diberikan. Jenis ini biasanya dipakai untuk penyesuaian kecil yang tidak mengubah tata letak utama. Misalnya, menurunkan teks sedikit agar terlihat sejajar dengan ikon. Konsep ini memperlihatkan bahwa relative sering digunakan untuk koreksi visual, bukan penataan besar. Dengan begitu, efeknya tidak merusak struktur utama halaman (Meyer, 2006).

.text-box {
  position: relative;
  top: 10px;
  left: 15px;
  background-color: lightyellow;
  padding: 10px;
}

Pada kode di atas, elemen dengan kelas .text-box bergeser ke bawah 10 piksel dan ke kanan 15 piksel. Meskipun terlihat bergeser, elemen lain tetap memperlakukan ruang awal .text-box sebagai posisinya. Hal ini membuat relative ideal untuk mengatasi kebutuhan estetika tanpa harus merombak struktur HTML.

b. Sebagai Acuan untuk Elemen Anak

Jenis berikutnya adalah penggunaan relative sebagai induk untuk elemen dengan absolute. Ketika induk diberi relative, anak dengan absolute akan menyesuaikan posisinya terhadap induk, bukan seluruh dokumen. Teknik ini sangat bermanfaat ketika ingin membuat elemen overlay, badge, atau tooltip. Tanpa relative pada induk, anak absolute akan menempel pada batas halaman, bukan elemen yang dimaksud. Dengan demikian, relative menyediakan kerangka acuan yang konsisten. Konsep ini memperkuat fleksibilitas tata letak modern (Robbins, 2018).

.card {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: lightgray;
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: red;
  color: white;
  padding: 5px;
}

Dalam contoh ini, .card berfungsi sebagai induk dengan posisi relatif. Badge yang ditempatkan di sudut kanan atas tetap melekat pada induk meskipun .card dipindahkan. Hal ini memperlihatkan bagaimana relative membantu menciptakan elemen-elemen tambahan yang rapi.

c. Menggabungkan dengan Efek Visual

Jenis lain dari penggunaan relative adalah penggabungan dengan properti CSS lain untuk efek visual. Contohnya, digabungkan dengan z-index agar elemen tampil di atas elemen lain. Pengembang juga sering menggunakan relative bersama animasi berbasis CSS untuk menggeser elemen secara halus. Dengan kombinasi ini, relative tidak hanya mengatur posisi statis, tetapi juga membantu menciptakan interaksi dinamis. Strategi ini banyak digunakan pada desain web interaktif dan responsif. Secara akademis, efek ini memperkuat keterhubungan antara struktur dan estetika (Cederholm, 2010).

.image-container {
  position: relative;
  z-index: 2;
  top: 5px;
}

.overlay {
  position: relative;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}

Kode di atas memperlihatkan dua elemen yang sama-sama menggunakan relative. Dengan bantuan z-index, elemen .image-container tampil di atas .overlay. Hasilnya adalah lapisan visual yang lebih teratur, menunjukkan fleksibilitas relative dalam mendukung kebutuhan desain modern.

5. Implementasi dari Setiap Contoh

a. Implementasi Pergeseran Sederhana

Pergeseran sederhana dengan position relative sering digunakan dalam kasus nyata seperti menyeimbangkan teks terhadap ikon. Misalnya, pada sebuah tombol dengan ikon di sebelah kiri, teks bisa terlihat sedikit lebih rendah. Dengan memberikan top: 2px pada teks, tampilan menjadi lebih proporsional tanpa harus mengubah padding atau margin global. Implementasi ini memperlihatkan kepraktisan relative untuk koreksi visual kecil. Hal ini lebih efisien dibandingkan membuat ulang struktur HTML. Maka, relative berfungsi sebagai solusi elegan dalam menyempurnakan tampilan (Meyer, 2006).

.button-text {
  position: relative;
  top: 2px;
}

Kode di atas memperlihatkan bagaimana teks tombol diturunkan sedikit agar sejajar dengan ikon. Implementasi seperti ini menjaga konsistensi antar komponen UI tanpa mengubah elemen lain di sekitarnya.

b. Implementasi Sebagai Acuan untuk Elemen Anak

Dalam praktiknya, relative sangat sering dipakai pada kartu produk dengan badge promosi. Badge “Diskon 50%” misalnya, harus selalu muncul di pojok kanan atas kartu produk. Dengan menjadikan kartu induk relative dan badge anak absolute, posisi badge tetap konsisten. Strategi ini memastikan tampilan badge tidak berpindah ke area yang tidak diinginkan saat tata letak berubah. Implementasi ini mencerminkan bagaimana relative menjadi penentu batas ruang bagi anak. Dengan begitu, struktur desain lebih terjaga dan modular (Robbins, 2018).

.product-card {
  position: relative;
  width: 250px;
  height: 300px;
  border: 1px solid #ccc;
}

.discount-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  padding: 4px;
}

Kode ini menunjukkan bahwa badge selalu melekat pada induknya, meskipun kartu dipindahkan. Implementasi ini sangat umum di e-commerce dan dashboard modern.

c. Implementasi Menggabungkan dengan Efek Visual

Efek visual dengan relative bisa dilihat pada gambar yang diberi lapisan overlay. Misalnya, gambar produk diberi overlay transparan agar teks di atasnya lebih terbaca. Elemen gambar dan overlay keduanya menggunakan relative dengan z-index berbeda. Hal ini membuat pengembang bisa mengatur lapisan tanpa mengubah aliran dokumen. Implementasi ini memperlihatkan peran relative dalam menciptakan kedalaman visual. Efek semacam ini semakin penting dalam desain modern berbasis pengalaman pengguna (Cederholm, 2010).

.image-wrapper {
  position: relative;
  z-index: 1;
}

.image-overlay {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
}

Hasil implementasi ini adalah gambar dengan efek lapisan elegan yang menambah estetika. Teknik ini digunakan dalam galeri foto, hero banner, atau portofolio.

6. Kesalahan Umum dalam Menggunakan Position Relative

a. Mengira Relative Sama dengan Absolute

Banyak pemula menganggap relative bekerja sama seperti absolute, padahal keduanya memiliki logika yang berbeda. Relative tetap mengikuti alur normal dokumen, sedangkan absolute keluar dari alur dan menempel pada kontainer terdekat yang memiliki posisi. Kesalahpahaman ini menyebabkan elemen yang seharusnya hanya bergeser sedikit menjadi melayang tak terkendali. Akibatnya, tampilan bisa rusak terutama pada desain responsif. Kesalahan ini muncul karena kurang memahami hubungan induk dan anak pada CSS positioning. Untuk itu, membedakan kedua konsep ini sangat penting (Meyer, 2006).

Contoh salah:

.box {
  position: relative;
  top: 50px;
  left: 50px;
}

Contoh benar:

.box {
  position: absolute;
  top: 50px;
  left: 50px;
}

Perbedaan di atas menunjukkan bahwa relative hanya menggeser elemen dari posisi awalnya, sedangkan absolute melepaskan elemen dari alur normal.

b. Menjadikan Relative Sebagai Alat Utama untuk Layout

Kesalahan umum lainnya adalah menggunakan relative sebagai alat utama membangun layout, misalnya untuk grid atau struktur utama halaman. Hal ini sering menyebabkan kode CSS menjadi sulit dikelola, karena setiap elemen digeser manual dengan top, left, right, atau bottom. Padahal, layout lebih tepat dibangun menggunakan Flexbox atau Grid CSS. Relative seharusnya hanya dipakai untuk penyesuaian kecil, bukan membentuk keseluruhan tata letak. Penggunaan berlebihan dapat menciptakan desain yang tidak konsisten di berbagai resolusi layar (Robbins, 2018).

Contoh salah:

.column {
  position: relative;
  left: 200px;
}

Contoh benar:

.container {
  display: flex;
}

.column {
  flex: 1;
}

Contoh benar memperlihatkan solusi yang lebih semantik dan stabil untuk layout dibanding memaksa elemen dengan relative.

c. Melupakan Position Context untuk Elemen Anak

Kesalahan lain terjadi ketika pengembang ingin meletakkan elemen anak dengan absolute tetapi lupa memberikan relative pada induk. Akibatnya, elemen anak akan menempel pada viewport atau kontainer lain yang tidak diinginkan. Situasi ini sering terlihat pada tooltip, badge, atau pop-up kecil. Dengan tidak adanya konteks relative, posisi elemen anak menjadi sulit diprediksi. Hal ini dapat merusak pengalaman pengguna karena tampilan tidak konsisten. Untuk itu, relative pada induk adalah kunci agar anak bisa dikendalikan dengan absolute (Cederholm, 2010).

Contoh salah:

.badge {
  position: absolute;
  top: 0;
  right: 0;
}

Contoh benar:

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
}

Perbedaan terlihat jelas, di mana relative pada induk memastikan badge selalu menempel pada kartu, bukan di pojok layar.

Tabel Perbandingan Kesalahan dan Solusi

7. Best Practice dalam Menggunakan Position Relative

a. Gunakan Relative Hanya untuk Penyesuaian Kecil

Position relative paling baik digunakan untuk penyesuaian kecil, bukan untuk membangun layout utama. Dengan menggeser elemen beberapa piksel, pengembang bisa menciptakan efek visual tanpa mengganggu struktur halaman. Hal ini membuat kode CSS lebih bersih dan mudah dipelihara, karena tidak banyak aturan yang dipaksakan pada elemen. Menurut Robbins (2018), penggunaan yang tepat dari relative membantu mempertahankan alur dokumen. Penempatan kecil seperti ikon, badge, atau dekorasi visual adalah contoh sempurna dari penerapannya. Dengan pendekatan ini, relative tidak membebani arsitektur layout secara keseluruhan.

b. Selalu Kombinasikan dengan Absolute untuk Elemen Anak

Praktik terbaik berikutnya adalah mengkombinasikan relative pada elemen induk dengan absolute pada elemen anak. Strategi ini memungkinkan posisi anak dikendalikan dengan jelas, sehingga elemen tambahan seperti tooltip atau pop-up dapat menempel rapi. Tanpa relative pada induk, elemen anak akan menempel pada viewport, yang seringkali tidak diinginkan. Meyer (2006) menegaskan bahwa kombinasi ini adalah dasar dari sistem positioning pada CSS. Dengan membangun konteks menggunakan relative, desainer web bisa lebih fleksibel mengatur komponen. Hal ini menjadikan struktur halaman lebih stabil dan konsisten di berbagai resolusi.

c. Hindari Penggunaan Relative untuk Layout Kompleks

Menggunakan relative untuk menggeser kolom atau baris dalam layout besar adalah kesalahan umum. Sebaliknya, gunakan CSS Grid atau Flexbox untuk mengelola tata letak dengan lebih terstruktur. Relative tidak dirancang untuk menjadi pondasi layout utama, melainkan hanya alat bantu untuk pengaturan posisi minor. Robbins (2018) menjelaskan bahwa mengandalkan relative untuk layout sering membuat kode sulit dirawat dan rentan kesalahan. Dengan memisahkan tugas, yaitu Grid/Flex untuk struktur utama dan relative untuk penyesuaian kecil, hasil desain lebih konsisten. Hal ini akan sangat membantu terutama ketika proyek tumbuh lebih kompleks.

8. Kesimpulan

Position relative pada CSS adalah salah satu properti yang sederhana namun sangat penting dalam membangun desain web modern. Dengan kemampuannya untuk memindahkan elemen tanpa merusak aliran dokumen, relative memberikan fleksibilitas besar pada desainer. Properti ini sangat berguna ketika dipakai untuk penyesuaian kecil, seperti menambahkan ikon, badge, atau elemen dekoratif. Namun, ketika digunakan dengan sembarangan, terutama pada layout besar, relative bisa menimbulkan masalah serius. Menurut Robbins (2018), relative harus selalu dipahami sebagai alat bantu tambahan, bukan pondasi utama tata letak. Oleh karena itu, pemahaman konsep dasar dan praktik terbaik menjadi kunci untuk mengoptimalkan penggunaannya.

Selain itu, penting untuk mengingat bahwa relative sering kali bekerja optimal dalam kombinasi dengan absolute pada elemen anak. Dengan menciptakan konteks posisi, desainer web dapat lebih mengontrol penempatan komponen tambahan seperti tooltip atau pop-up. Penggunaan relative sebaiknya selalu disertai prinsip keteraturan kode agar tetap mudah dipelihara dalam jangka panjang. Hal ini menunjukkan bahwa relative bukan sekadar teknik teknis, tetapi juga bagian dari strategi desain yang efisien. Dengan mengikuti praktik terbaik, kesalahan umum dapat dihindari dan hasil desain akan lebih konsisten. Maka, relative dapat menjadi senjata ampuh dalam toolkit seorang pengembang web.

Gagasan Utama:

• Relative ideal untuk penyesuaian kecil pada elemen, bukan layout utama.
• Selalu kombinasikan relative pada induk dengan absolute pada anak untuk hasil optimal.
• Hindari penggunaan relative pada struktur kompleks; gunakan Grid/Flexbox sebagai alternatif.
• Pahami konteks dan tujuan penggunaan relative agar kode tetap bersih dan mudah dirawat.
• Praktik terbaik membantu menghindari kesalahan umum dan meningkatkan konsistensi desain.

9. Referensi

• Cederholm, D. (2017). CSS3 for Web Designers. New York: A Book Apart.
• Keith, J. (2018). HTML5 for Web Designers. New York: A Book Apart.
• Marcotte, E. (2017). Responsive Web Design. San Francisco: A Book Apart.
• Robbins, J. (2018). Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics. O’Reilly Media.
• W3C. (2023). CSS Positioned Layout Module Level 3. Retrieved from https://www.w3.org/TR/css-position-3/
• MDN Web Docs. (2023). CSS: position property. Mozilla Foundation. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/position