Memahami CSS Positioning

by

Properti position berfungsi untuk memanipulasi lokasi dari sebuah element.

  • static: adalah nilai default, element akan mengikut page flow. Property left/right/top/bottom/z-index tidak akan berefek.
  • relative: element position akan tetap mengikut flow dari document, seperti static. Namun sekarang property left/right/top/bottom/z-index akan berefek.
  • absolute: element dikeluarkan dari document flow.
  • fixed: sama seperti absolute. Namun context posisi relatif terhadap document, tidak terpengaruh oleh scrolling.
  • sticky (experimental): element bersifat seperti relative sampai lokasi scroll dari viewport mencapai nilai threshold, dimana value posistion dari element akan menjadi fixed.

Property position hanya berfungsi untuk memberitahu browser, tipe positioning yang digunakan. Untuk mengatur lokasinya sendiri digunakan property top, bottom, left dan right.

Mengubah lokasi sebuah element juga tergantung dari context position. Contoh context posisiton adalah terhadap viewport, element <html> atau <body> atau element lainnya.

Untuk lebih jelas, mari kita gunakan file modul sebelumnya dan ubah navigasi agar selalu tampil walaupun halaman di scrol ke bawah. Property position yang digunakan adalah fixed, dimana context positoning adalah terhadap viewport.

Ubah CSS untuk class .main-header dengan menambahkan property position, top dan left.

.main-header{
    width: 100%;
    background-color: green;
    padding: 6px;
    position: fixed;
    top: 0;
    left: 0;
}

Berikut isi lengkap file css dan html

*{
    box-sizing: border-box;
}

body{
    font-family: 'Nunito', sans-serif;
    margin: 0px;
}

#product-title{
    background: url("https://www.moneyunder30.com/wp-content/uploads/2016/07/171_understanding-student-loan-grace-periods-deferment-and-forbearance-648x364-c-default.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px;
    width: 100%;
    height: 400px;
}

.section-title{
    color: teal;
    text-align: center;
}

.plan{
    background: yellowgreen;
    text-align: center;
    padding: 12px;
    margin: 8px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}

.plan-highlight{
    background: rgb(45, 173, 45);
    color: white;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.plan-annotation{
    background: white;
    color: black;
    padding: 6px;
    border-radius: 4px;
}

.plan-features{
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-features li{
    margin: 8px 0;
}

.plan-title{
    color: rgb(0, 79, 143);

}
.plan-price{
    color: rgb(194, 194, 194);
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

.main-header{
    width: 100%;
    background-color: green;
    padding: 6px;
    position: fixed;
    top: 0;
    left: 0;
}

.main-nav-items{
    list-style: none;
}

.main-nav-item{
    display: inline-block;
    margin: 0 10px;
}

.main-nav-item a{
    text-decoration: none;
    color: whitesmoke;
}

.main-nav-item a:hover{
    font-weight: bold;
}

.main-nav-item-button a{
    color: whitesmoke;
    background-color: red;
    padding: 6px 10px;
    border-radius: 4px;
}

.main-nav-item-button a:hover{
    color: red;
    background-color: whitesmoke;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <nav class="main-nav">
            <ul class="main-nav-items">
                <li class="main-nav-item"><a href="#">Paket</a></li>
                <li class="main-nav-item"><a href="#">Mentor</a></li>
                <li class="main-nav-item main-nav-item-button"><a href="#">Mulai Berlangganan</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section id="plans">
            <h1 class="section-title">Pilih paket langganan</h1>
            <div>
                <article class="plan">
                    <h1 class="plan-title">Programmer</h1>
                    <h2 class="plan-price">$10/month</h2>
                    <h3>Pelajari bahasa standard industri</h3>
                    <ul class="plan-features">
                        <li>Semua Tutorial Programming</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article  class="plan plan-highlight">
                    <h1 class="plan-annotation">Recommended</h1>
                    <h1 class="plan-title">Data Science</h1>
                    <h2 class="plan-price">$39/month</h2>
                    <h3>The most sexiest Job</h3>
                    <ul class="plan-features">
                        <li>Semua Modul Data Science</li>
                        <li>Certificate Associate</li>
                        <li>Plus Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan">
                    <h1 class="plan-title">Web Developer</h1>
                    <h2 class="plan-price">$29/month</h2>
                    <h3>FUllstack web developer</h3>
                    <ul class="plan-features">
                        <li>Semua modul web development</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
            </div>            
        </section>        
    </main>
</body>
</html>
Sharing is caring:

Leave a Comment