CSS Layouting - #11 Position : Static & Relative

00:10:46
https://www.youtube.com/watch?v=qCPrNyW3XFg

Ringkasan

TLDRThe video, hosted by Sandhika Galih, introduces CSS positioning, focusing on static and relative position properties. These are crucial for controlling HTML element layout. Through visual examples, such as creating and styling three divs with different colors, the video explains how position influences element behavior and appearance in a page. Positioning starts with static, the default, and introduces relative, which allows elements to move from their original spot without impacting surrounding elements. Understanding involves using 3D visual aids and code examples, making it easier to grasp CSS positioning's impacts. This part deals with static and relative positions, and hints at future discussions on absolute and fixed positions. Viewers are encouraged to engage by practicing the illustrated examples and exploring additional tutorial resources.

Takeaways

  • 📚 Learning CSS Positioning: Static and Relative.
  • 🖥️ Visualization with 3D tools to comprehend positioning.
  • 🎨 Example with three colored divs: green, violet, gold.
  • 🚀 Moving elements without affecting others using 'position'.
  • 💡 Default position in CSS is 'static'.
  • 🔗 Relative positioning affects based on original position.
  • 🔍 Setting 'position: relative' doesn't visually change position unless modified with 'top', 'left', etc.
  • 🌀 Understanding element flow in CSS positioning.
  • ↔️ Use of 'top', 'left', 'bottom', 'right' for movements.
  • 📈 Advancing elements one dimension with 'relative' position.

Garis waktu

  • 00:00:00 - 00:05:00

    In this video, Sandhika Galih introduces the main topic of the series, CSS positioning, which is crucial for laying out HTML elements as desired. He explains that the video will be divided into sections and will include exercises at the end for better understanding. Before diving into CSS positioning, he reviews past materials and demonstrates setting up a simple HTML structure with three div elements, each styled with different background colors and dimensions. He then shows how margins affect the positioning of elements by manually adjusting the margin-left and margin-top properties, pointing out that using margins to move elements can inadvertently shift surrounding elements as well.

  • 00:05:00 - 00:10:46

    Sandhika explains the importance of the 'position' property in CSS, which allows elements to be moved without affecting the surrounding elements. He introduces four possible values for the 'position' property: static, relative, absolute, and fixed, with 'static' being the default. He discusses the concept of 'non-static' positioning, particularly focusing on 'relative' positioning. Through a 3D illustration, Sandhika demonstrates how an element with 'position: relative' can move on its own layer without disrupting others. He explains how 'relative' positioning keeps the original space occupied by the element even after it moves and how it shifts relative to its initial position. Sandhika also hints that moving elements typically involve using 'absolute' positioning, which will be covered in the next video.

Peta Pikiran

Video Tanya Jawab

  • What is the default CSS position property?

    The default position property in CSS is 'static'.

  • How does 'position: relative' work differently from 'static'?

    'Position: relative' allows elements to be moved based on their original position without affecting surrounding elements.

  • Can 'position: relative' move elements visibly by itself?

    No, 'position: relative' will not move elements unless it's combined with 'top', 'left', 'bottom', or 'right' properties.

  • What happens to the space of an element moved with 'position: relative'?

    The original space is retained, even if the element is moved with 'position: relative'.

  • What are some common properties used with 'position: relative'?

    Common properties include 'top', 'left', 'bottom', and 'right'.

Lihat lebih banyak ringkasan video

Dapatkan akses instan ke ringkasan video YouTube gratis yang didukung oleh AI!
Teks
id
Gulir Otomatis:
  • 00:00:00
    Halo Halo temen-temen semua apa kabar
  • 00:00:03
    Masih bersama saya sandhika Galih dan di
  • 00:00:05
    video kali ini kita akan belajar
  • 00:00:07
    mengenai topik utama dari seri kita
  • 00:00:09
    yaitu CSS positioning itu sendiri JSS
  • 00:00:12
    positioning ini sangat penting karena
  • 00:00:13
    akan membuat kalian dapat melakukan tata
  • 00:00:16
    letak dari elemen-elemen HTML Nanti
  • 00:00:19
    kalian buat itu sesuai dengan keinginan
  • 00:00:21
    kalian agar lebih mudah memahami posisi
  • 00:00:23
    yang ini nanti videonya akan saya bagi
  • 00:00:25
    menjadi beberapa bagian dan nanti
  • 00:00:27
    seperti biasa di akhir kita akan ada
  • 00:00:29
    latihan supaya kalian lebih paham lagi
  • 00:00:32
    tentang materi ini sebelum kita masuk ke
  • 00:00:34
    materi posisi on kita akan coba review
  • 00:00:36
    dulu materi-materi kita sebelumnya jadi
  • 00:00:38
    sekarang coba cek kita langsung buka
  • 00:00:39
    kode editor kita ya baik Jadi ceritanya
  • 00:00:43
    begini bisa seakan membuat tiga buah di
  • 00:00:45
    yang pertama saya kasih nama kelasnya
  • 00:00:46
    satu yang kedua saya kasih nama kelasnya
  • 00:00:49
    23 cita-citamu kelas 3 ini lalu kita
  • 00:00:54
    coba kasih style misalnya ketiga Disini
  • 00:00:56
    saya akan kasih ukurannya 200 tixel dan
  • 00:01:00
    haid
  • 00:01:00
    200 piksel juga nanti yang membedakan
  • 00:01:03
    antar defini adalah warnanya saja diving
  • 00:01:05
    pertama itu akan saya kasih warna
  • 00:01:07
    background hijau ya lalu Diva yang kedua
  • 00:01:11
    saya kasih warna background warna violet
  • 00:01:14
    ya dan yang terakhir yang ketiga itu
  • 00:01:17
    kita kasih warna gold misalnya Coba kita
  • 00:01:20
    lihat hasilnya Ya Klik Kanan Open in
  • 00:01:23
    browser hasilnya seperti ini ya harusnya
  • 00:01:25
    kalian sudah bisa memprediksi bahwa
  • 00:01:26
    hasilnya akan seperti ini jika kita
  • 00:01:29
    menggunakan teknik yang sudah kita
  • 00:01:31
    pelajari sebelumnya misalnya Saya ingin
  • 00:01:33
    merubah posisi dari salah satu kotak
  • 00:01:36
    tadi kira-kira apa yang akan kita
  • 00:01:38
    lakukan kita bisa saja menambahkan
  • 00:01:40
    margin di salah satu kotaknya ya
  • 00:01:44
    Misalnya saya akan menggeser otak yang
  • 00:01:46
    kedua di kotak yang warna violet ini
  • 00:01:48
    karena saya ingin menggeser dia ke
  • 00:01:50
    sebelah kanan maka kita akan beri dia
  • 00:01:52
    margin di sebelah kiri ya betul ya kita
  • 00:01:54
    coba yang 2 ini misalkan saya akan geser
  • 00:01:57
    ke sebelah kanan maka saya akan kasih
  • 00:01:59
    dia margin-left
  • 00:02:00
    sebanyak 30 bisa maka dia bergeser ke
  • 00:02:03
    kanan eh sepertinya tidak ada masalah
  • 00:02:04
    Nah sekarang gimana kalau saya ingin
  • 00:02:06
    geser kotak ini ke bawah maka kita
  • 00:02:09
    gampang aja tinggal kasih margin-top
  • 00:02:11
    gini ya Sebanyak misalnya 30 pixel maka
  • 00:02:15
    kotak ini akan bergeser ke bawah betul
  • 00:02:17
    ya tapi masalahnya ketika seri Friends
  • 00:02:20
    maka elemen-elemen yang berada
  • 00:02:23
    setelahnya akan ikut bergeser ke bawah
  • 00:02:25
    karena itu memang perilaku dari margin
  • 00:02:28
    begitu kita kasih sebuah elemen itu
  • 00:02:30
    margin maka dia akan mempengaruhi elemen
  • 00:02:32
    disekitarnya begitu pula jika kita geser
  • 00:02:35
    kotak ini keatasnya misalnya kita
  • 00:02:37
    kembalikan dulu margin-top menjadi nol
  • 00:02:40
    baris ini jika kita ingin geser kotak
  • 00:02:43
    violet ini ke atas maka kita bisa kasih
  • 00:02:45
    margin-top Nya minus minus 30 pixel
  • 00:02:48
    misalnya maka otaknya akan naik ke atas
  • 00:02:51
    peti ininya overlap ke kotak yang hijau
  • 00:02:54
    tapi elemen dibawahnya yaitu kotak yang
  • 00:02:56
    warna gold ini akan ikut bergeser ke
  • 00:02:59
    atas ya
  • 00:03:00
    seperti itu Nah sekarang gimana Jika
  • 00:03:03
    kita ingin menggeserkan kotaknya tanpa
  • 00:03:06
    mempengaruhi elemen disekitarnya nah
  • 00:03:08
    disitulah saatnya kita menggunakan
  • 00:03:10
    properti yang namanya position ya
  • 00:03:13
    position memungkinkan kita untuk
  • 00:03:15
    menggeserkan sebuah elemen tanpa
  • 00:03:17
    mempengaruhi elemen disekitarnya yang
  • 00:03:20
    kita coba lihat deh ya Jadi untuk
  • 00:03:22
    menggunakan CSS posisi on kita perlu
  • 00:03:24
    sebuah properti yang namanya position
  • 00:03:26
    dan value yang kita bisa gunakan ada 4
  • 00:03:29
    yang pertama ada statik yang kedua ada
  • 00:03:32
    relatif yang ketiga ada absolut dan fix
  • 00:03:36
    jika kita tidak memberikan properti
  • 00:03:39
    position pada sebuah elemen maka default
  • 00:03:42
    dari properti position ya adalah Static
  • 00:03:44
    jadi kalau kita nggak ngasih apa-apa Itu
  • 00:03:47
    posisinya Static dimakannya Kenapa saya
  • 00:03:49
    tulis warna hijau seperti ini Nah kalau
  • 00:03:52
    kalian menggunakan position selain
  • 00:03:53
    statik atau saya sebutnya non-static ya
  • 00:03:56
    nanti akan membuat sebuah elemen menjadi
  • 00:04:00
    ah olah berada di dimensi yang berbeda
  • 00:04:04
    dari elemen lainnya namun konsep yang
  • 00:04:07
    kedua ini yang nantinya akan membuat
  • 00:04:09
    position menjadi sedikit membingungkan
  • 00:04:11
    jadi kita lihat daya lalu yang ketiga
  • 00:04:13
    Nia elemen diberi position selain statik
  • 00:04:16
    atau non-static tadi dia memiliki akses
  • 00:04:19
    atau jadi dapat menggunakan properti top
  • 00:04:23
    left bottom dan Ride contohnya jika
  • 00:04:26
    kembali ke kasus yang ini ya kita lihat
  • 00:04:28
    source code nya ketiganya Saya tidak
  • 00:04:31
    berikan properti position apa-apa kalau
  • 00:04:34
    misalkan saya kasih yang dua misalnya
  • 00:04:35
    yang warna violet ini saya kasih
  • 00:04:38
    position Static ya kita lihat hasilnya
  • 00:04:41
    seri fresh tidak akan terjadi apa-apa Ya
  • 00:04:44
    karena memang default-nya adalah Static
  • 00:04:46
    Nah sekarang kita coba untuk mengubah
  • 00:04:50
    posisi on Static ini menjadi relatif ini
  • 00:04:54
    adalah kali pertama yang akan kita coba
  • 00:04:55
    dan menurut saya konsepnya paling mudah
  • 00:04:58
    dipahami ya nanti kita lihat kalau
  • 00:05:00
    kreasi position relative hasilnya
  • 00:05:02
    seperti apa kita lihat saya Coba refresh
  • 00:05:05
    Jadi sepertinya tidak terjadi apa-apa ya
  • 00:05:08
    yang warna violet yang tidak bergerak
  • 00:05:10
    kemana-mana terus elemen lain juga
  • 00:05:12
    sepertinya tidak terpengaruh tak Terus
  • 00:05:14
    apa dong bedanya sama position Static
  • 00:05:16
    kalau kalian bingung kita coba lihat
  • 00:05:18
    representasi lainnya mungkin saya bisa
  • 00:05:20
    Contohkan dalam bidang tiga dimensi ya
  • 00:05:22
    Jadi mungkin seperti ini ini saya
  • 00:05:25
    menggunakan buah website yang namanya
  • 00:05:27
    tinkercad ini adalah website gimana kita
  • 00:05:29
    bisa membuat objek objek tiga dimensi ya
  • 00:05:32
    ilustrasi aja bukan berarti elemen yang
  • 00:05:34
    kita buat itu merupakan tiga dimensi
  • 00:05:36
    bukan ini hanya contoh saja jadi
  • 00:05:38
    misalnya ini tadi kasus kita yang
  • 00:05:40
    pertama Ya kalau kita buat tiga buah
  • 00:05:42
    elemen 123 seperti ini kalau kita anggap
  • 00:05:44
    sebagai bidang tiga dimensi makan nanti
  • 00:05:47
    kita bisa lihat seperti ini jika kita
  • 00:05:50
    membuat tiga buah Div maka elemen yang
  • 00:05:53
    kita buat belakangan akan berada
  • 00:05:54
    dibawahnya sekarang jika elemen ini tiga
  • 00:05:58
    buah definisi salah satunya misalkan ya
  • 00:06:00
    Blade ini saya kasih posisi relatif Maka
  • 00:06:03
    hasilnya akan seperti ini kelihatannya
  • 00:06:05
    kalau misalkan dari sudut pandang
  • 00:06:07
    seperti ini kelihatannya enggak ada yang
  • 00:06:08
    berubah tapi ketika saya geser
  • 00:06:12
    Hai Steny kotak violet yaitu maju satu
  • 00:06:17
    dimensi gitu ya mungkin ini ilustrasinya
  • 00:06:20
    saya bisa Contohkan seperti ini Eh jadi
  • 00:06:22
    tadinya dia satu bidang karena dia maju
  • 00:06:25
    satu dimensi ketika dia maju satu
  • 00:06:27
    dimensi sekarang dia punya akses ke
  • 00:06:30
    properti yang namanya toples Batam Ride
  • 00:06:32
    sehingga kita bisa geser ke dia
  • 00:06:34
    kemanapun kita mau jadi kalau saya
  • 00:06:36
    geserkan ini kemanapun dia tidak akan
  • 00:06:38
    mengganggu elemen yang lainnya di
  • 00:06:40
    logikanya seperti itu kita coba lihat
  • 00:06:42
    sekarang sudah kita kasih relatif Karang
  • 00:06:44
    kita kasih misalnya top 30 pixel Ini
  • 00:06:48
    artinya saya akan menggeser elemen2 ini
  • 00:06:51
    kebawah sebanyak 30 pixel kita lihat
  • 00:06:54
    hasilnya ini ya seri flash maka dia akan
  • 00:06:57
    turun stoknya saya tambah 30 bisa begitu
  • 00:07:00
    Jadi kotak yang warna gold ini dia tidak
  • 00:07:03
    ikut bergeser ya karena kalian ingat
  • 00:07:06
    tadi yang violet sudah maju satu dimensi
  • 00:07:08
    gitu jadi positioning itu intinya yang
  • 00:07:11
    tadinya berada dalam flow
  • 00:07:12
    Wow kita buat dia keluar dari flow atau
  • 00:07:15
    flow anggap aja dia maju satu dimensi
  • 00:07:18
    Begitulah Ya gampangnya dan kita bisa
  • 00:07:21
    beri dia keempat selalu tadi misalkan
  • 00:07:23
    left 50 pizza maka sebelah kiri akan
  • 00:07:26
    bertambah sebanyak 50 pixel begitu oke
  • 00:07:30
    itu relatif ya kita lihat perilaku lain
  • 00:07:33
    dari relatif ini position relative ya
  • 00:07:35
    Ada beberapa ini harus kalian perhatikan
  • 00:07:37
    yang pertama tadi kita jadi punya akses
  • 00:07:40
    ke toples Batam Raya sah ketika kita
  • 00:07:42
    menggerakkan elemen dengan posisi
  • 00:07:44
    relatif menggunakan toples baterai ruang
  • 00:07:47
    yang ditempati sebelumnya oleh elemen
  • 00:07:49
    tadi masih ada jadi masih tersisa jadi
  • 00:07:53
    pada saat kita menggerakkan kotaknya
  • 00:07:55
    ruangan tempat dia berada sebelumnya
  • 00:07:57
    masih ada paweh yang kedua ketika kita
  • 00:08:01
    menggerakkan elemen dengan posisi
  • 00:08:03
    relatif elemen tersebut akan bergerak
  • 00:08:06
    relatif terhadap posisi semulanya di
  • 00:08:09
    makanya Kenapa disebut relatif position
  • 00:08:11
    karena dia akan bergerak
  • 00:08:12
    kreatif terhadap posisi sebelumnya teh
  • 00:08:15
    makanya lihat yang ketiga jika kita
  • 00:08:17
    memberi properti tok0 dari level 0 Jadi
  • 00:08:21
    biasanya saya pakai sebagai posisi acuan
  • 00:08:23
    ya posisi acuan kalau kita kasih top
  • 00:08:26
    0live nol maka jelas elemende tidak akan
  • 00:08:29
    berubah posisinya ke jadi itu perilaku
  • 00:08:32
    dari posisi relatif heulang ya Jadi yang
  • 00:08:35
    pertama sama seperti properti non-static
  • 00:08:37
    lainnya ketika kita kasih posisi relatif
  • 00:08:40
    dia punya akses ke properti toples
  • 00:08:43
    baterai lalu yang kedua pada saat kita
  • 00:08:47
    menggerakkan elemen yang posisinya
  • 00:08:49
    Relatif itu artinya kita menggerakkan
  • 00:08:51
    relatif terhadap posisi awalnya lalu
  • 00:08:55
    kalian harus ingat pada saat kita
  • 00:08:57
    memberi sebuah elemen posisi relatif dan
  • 00:09:00
    kita menggerakkannya tua tempat dia
  • 00:09:04
    berada sebelumnya masih ada dan yang
  • 00:09:06
    terakhir sebagai acuan ketika kalian
  • 00:09:08
    kasih pop0 dan levanol itu dia enggak
  • 00:09:11
    akan geser
  • 00:09:12
    karena Oh ya Dan Terakhir Biasanya kita
  • 00:09:15
    jarang banget geser-geser elemen dengan
  • 00:09:18
    posisi relatif karena biasanya kita
  • 00:09:20
    memberikan proporsi relatif terhadap
  • 00:09:22
    sebuah elemen itu hanya karena kita
  • 00:09:25
    ingin membuat elemennya baju satu
  • 00:09:27
    dimensi aja atau keluar dari flownya aja
  • 00:09:29
    ya karena biasanya yang
  • 00:09:32
    menggerak-gerakkan elemen non-static itu
  • 00:09:34
    adalah elemen dengan position Absolute
  • 00:09:36
    ten dan itu akan kita bahas di video
  • 00:09:38
    selanjutnya Ya baik mungkin itu dulu ya
  • 00:09:41
    bagian pertama dari video kita tentang
  • 00:09:43
    position jadi kita baru pelajari baru
  • 00:09:46
    statik dan relatif yang menurut saya
  • 00:09:48
    relatif adalah elemen non-static yang
  • 00:09:50
    paling mudah dipahami ya nanti di video
  • 00:09:53
    selanjutnya kita akan bahas mengenai dua
  • 00:09:55
    feeling sisanya yaitu absolut dan fix
  • 00:09:58
    kayaknya dua posisi itu merupakan
  • 00:10:01
    position yang menyenangkan untuk
  • 00:10:02
    digunakan lah ya Jadi mudah-mudahan
  • 00:10:04
    kalian paham dulu mengenai position
  • 00:10:06
    relative karena Meskipun sederhana
  • 00:10:08
    posisi tersebut merupakan position yang
  • 00:10:11
    cukup penting di
  • 00:10:12
    saya terima kasih teman-teman sudah
  • 00:10:13
    nonton video ini ya udah nggak bingung
  • 00:10:16
    ya kalau misalkan ada yang bingung
  • 00:10:18
    karena belum bisa tanyakan aja di kolom
  • 00:10:20
    komentar di bawah video ini jangan lupa
  • 00:10:22
    kalau misalkan teman-teman merasa video
  • 00:10:23
    ini membantu mendesain live videonya dan
  • 00:10:27
    share ke temen-temennya lalu buat yang
  • 00:10:28
    belum subscribe channel ini silakan
  • 00:10:30
    subscribe dulu kalian bisa lebih update
  • 00:10:32
    kalau ada video-video baru di channel
  • 00:10:34
    ini Kalian juga bisa download Slide
  • 00:10:36
    untuk video kali ini linknya Udah saya
  • 00:10:38
    simpan di description di bawah kalian
  • 00:10:40
    bisa Klik aja kita ketemu lagi divideo
  • 00:10:42
    Berikutnya saya sandhika Galih terima
  • 00:10:43
    kasih
Tags
  • CSS Positioning
  • Static and Relative
  • Web Development
  • HTML Layout
  • Front-end Design
  • CSS Tutorial
  • Visual Learning
  • Coding Examples
  • Static Property
  • Positioning Techniques