Menu
CoddyTech
START LEARNING

Penempatan Relatif

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 56 dari 76.

Dalam CSS, pemosisian relatif adalah skema pemosisian yang memungkinkan kamu memosisikan elemen relatif terhadap posisi normalnya dalam alur dokumen. Saat elemen diatur ke position: relative;, elemen tetap berada dalam alur normal, tetapi kamu dapat menggunakan property top, right, bottom, dan left untuk menggesernya dari posisi awalnya. 

Berikut sintaks dasar untuk menggunakan pemosisian relatif:

selector {
    position: relative;
    top: value;
    right: value;
    bottom: value;
    left: value;
}
  • position: relative;: Deklarasi ini mengatur skema posisi elemen menjadi relatif.
  • top, right, bottom, left: Property ini menentukan offset elemen dari posisi normalnya. Kamu dapat menggunakan nilai positif atau negatif, yang ditentukan dalam piksel (px), em (em), persentase (%), atau satuan CSS valid lainnya.

Contohnya:

.box {
    position: relative;
    top: 20px;
    left: 30px;
}

Dalam contoh ini, elemen dengan class box akan diposisikan 20 piksel ke bawah dan 30 piksel ke kanan dari posisi normalnya dalam alur dokumen. Ruang yang semula ditempatinya akan tetap tersedia, dan elemen lain tidak akan mengalir ke ruang tersebut.

challenge icon

Tantangan

Mudah

Kamu diberi dokumen HTML dengan sebuah elemen (<div>) yang berisi tiga elemen anak (<div>) dengan class box1, box2, dan box3. Tugasmu adalah menggunakan pemosisian relatif untuk memindahkan elemen box2. Ikuti langkah-langkah berikut:

  1. Tulis aturan CSS yang menargetkan elemen <div> dengan class box2.
  2. Atur property position pada elemen .box2 menjadi relative.
  3. Atur property top pada elemen .box2 menjadi 20px dan property left menjadi 40px. Ini akan memindahkan kotak 20 piksel ke bawah dan 40 piksel ke kanan dari posisi normalnya.

Coba sendiri

<html>
<head>
    <title>Relative Positioning</title>
    <style>
        .container {
            width: 400px;
            height: 200px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
        <div class="box3">Box 3</div>
    </div>
</body>
</html>
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Menata dengan CSS

1Pengantar

Apa itu CSS?Sintaks CSSKomentar CSSTag HeadTag Title

4Dasar-Dasar Teks

Warna TeksJenis FontUkuran FontKetebalan FontPerataan TeksDekorasi TeksTantangan Rangkuman #1Tantangan Rangkuman #2

7Model Kotak Bagian 1

Apa Itu Model Kotak?PaddingMarginBorderLebar dan TinggiTantangan Ulasan

10Formulir Login

Bagian isiWadah formulirPelajaran proyekinputPelajaran proyekTombolPelajaran proyek

13Halaman Web Tonga

Menu NavigasiHeader SambutanPelajaran proyekBagian TentangPelajaran proyekBagian KontakPelajaran proyekTag ViewportPelajaran proyekMedia QueryPelajaran proyek

2Menambahkan CSS

CSS InlineCSS InternalCSS EksternalTantangan Penataan Gaya Dasar

5Warna dan Latar Belakang

Warna Latar BelakangWarna HEXWarna RGBTransparansi dengan RGBATantangan Rangkuman #1

8Model Kotak Bagian 2

Ukuran KotakRadius SudutLuapanBayangan KotakTantangan Mengulas

11Teknik Tata Letak

Elemen block vs inlineDasar PenempatanPenempatan RelatifPenempatan AbsolutPenempatan TetapDasar Z-IndexTantangan Kilas Balik

14Tantangan Akhir

Susun ItemDaftar FilmKartu Undangan PernikahanNotifikasi Mengambang

3Selektor Dasar

Pengantar SelektorSelektor TipeSelektor classSelektor IDSelektor GrupSelektor UniversalTantangan Seleksi

6Menu Kafe

Dasar TipografiPenataan TeksPelajaran proyekWarna dan Latar BelakangPelajaran proyek

9Flexbox

Apa itu Flexbox?Arah FlexJustify ContentAlign ItemsTitik Tengah yang SempurnaTantangan Flexbox

12Dasar-Dasar Desain Responsif

Apa Itu Desain Responsif?Tag Meta ViewportTata Letak FluidaUnit ViewportDasar-Dasar Media QueriesGambar Fleksibel

Latihan sendiri: Playground Web