CSS - Position

Hai semuanya, selamat datang kembali. Kali ini kita akan berbicara tentang posisi elemen di halaman web Anda. Mencoba mendesain tata letak halaman Anda dengan pengkodean pastinya banyak memakan waktu dan pikiran, bahkan error yang terjadi kadang membuat kita frustasi. Nah untuk layout, Ide-idenya sendiri sangat sederhana dan lugas, tapi untuk menempatkan secara bersamaan, dimana Anda harus menambahkan lebih banyak dan lebih banyak ke halaman Anda, maka bisa menjadi sedikit rumit. Seperti melakukan positioning pada elemen yang berbeda, atau, positioning property yang berbeda, semuanya nanti bisa Anda gunakan.

Ada empat properti position, diantaranya bersifat static, relative, absolute, and fixed, dan sebagian besar mereka sangat berbeda. Bagaimana anda bisa menggunakannya secara bersamaan atau mereka bekerja bersama, atau bagaimana mereka bekerja, adalah bahwa masing-masing ini juga dapat dimodifikasi oleh property seperti top, right, bottom, and left.

Jadi Anda mengatakan posisi seperti apa yang anda inginkan untuk elemen yang dipilih, dan kemudian anda bisa mengatakan, tapi Saya ingin elemen ini jauh dari atas atau lebih tinggi dari dasar, atau jauh dari sebelah kiri. Maka mari kita mulai dengan statis, dan alasannya kenapa kita akan mulai dengan statis karena Anda sudah melakukannya dan bahkan telah menggunakannya selama ini. Ini yang kami sebut value default untuk elemen.

Jika Anda tidak membuat aturannya sendiri maka default inilah yang berlaku untuk elemen tersebutitu akan diatur untuk ini. Cara kerjanya adalah browser akan menempatkan setiap elemen hanya dalam posisi yang tersedia berikutnya. Anda dapat memberikan value seperti top, bottom, left, and right tapi browser sepenuhnya mengabaikannya. Bagaimana bisa sedangkan dia punya value. Ingat materi yang lalu ketika terjadi value default kadang elemen tidak terpengaruh apapun tergantung property yang digunakan. Jadi meskipun Jadi,kita menambahkan value top, bottom, left, right, value tersebut tidak akan menghasilkan apapun. Anda tidak percaya coba saja kode berikut ini:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    div.static {
  position: static;
  border: 3px solid #543535;
}

div.static1 {
  position: static;
  top: 10px;
	left: 30px;  
  border: 3px solid #543535;
}
</style>
</head>
<body>
<div class="static">Penggunaan elemen static</div><p></p>

<div class="static1">Sudah ditambahkan value top dan left tetap static hasilnya</div>
</body>
</html>

Hasilnya :

position1

Kemudian ketika timbul ide, anda melihat dan mendesainnya pada lokasi yang diinginkan dengan menentukan jarak element baik kiri, kanan, atas, maupun bawah. Maka kuta bisa mengubah bagaimana browsernya memposisikan hal-hal, dan salah satu cara kita bisa melakukan itu adalah menggunakan posisi relatif. Anda bisa memberi contoh value relative pada properti position value seperti left, atau menggantinya dengan misalkan left menjadi right, menambah value sekian px dari properti top, dll. Lihat contoh berikut:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    div.static {
  position: static;
  border: 3px solid #543535;
}

div.relative {
  position: relative;
  top: 10px;
  left: 30px;
  border: 3px solid #543535;
}
</style>
</head>
<body>
<div class="static">Penggunaan elemen static</div><p></p>

<div class="relative">Penggunaan elemen, hasilnya elemen berada di antara jarak kiri sejauh 30px dari posisi normal dan atas sejauh 10px dari posisi normal.</div>
</body>
</html>

Hasilnya :

position2

Lihatkan?Kemana perginya elemen tadi? Jadi pada dasarnya, sangat mirip dengan posisi statis, tetapi sekarang Anda bisa menambahkan jarak 30px dari kiri, left:30px dan jarak atas 10px dari posisi normal. Posisi baru, tempat baru yang kita letakkan elemennya, itu tidak akan mempengaruhi setiap tetangganya. Sebaliknya, apa yang bisa dilakukan akan membuat browser memikirkannya seharusnya berada di tempat pertama tapi karena menggunakan relatif yang diposisikan elemen digunakan sebagai wadah atau blok untuk elemen lain, maka pembacaannya seperti diatas, jarak kiri sejauh 30px dan atas sejauh 10px dari posisi normal.

Kemudian bagaimana dengan Elemen absolute? Posisi absolute sebenarnya menyesuaikan dengan posisi relative dari tag root paling dekat atau akan menyesuaikan dengan tag body. Jadi, mari coba ini. Saya punya browse. Tidak punya banyak ruang di laman anda. Jadi pada ruang tersebut, katakanlah saya punya div, dan saya telah memutuskan bahwa itu absolute, dan itu harus turun 100 dari atas, dan mungkin 100 lebih. Jadi jika kita melakukan relatif, elemen berikutnya akan berada di bawahnya. Tetapi jika kita memiliki dua nilai absolut, yang berikutnya yang muncul akan pergi, sekali lagi, tepat di atasnya.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    <style>
<style>
div.relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }

        div.absolute {
            position: absolute;
            down:1080px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
        }
</style>
</head>
<body>
<div class="relative">Penggunaan elemen relative</div><p></p>

<div class="absolute">Penggunaan elemen absolute</div>
</body>
</html>

Hasilnya :

position3

Baiklah, posisi terakhir itu Saya akan berbicara tentang disebut fixed. Berbeda dengan relative,fixed mengatur properti top, bottom, left, dan right yang di sesuaikan dengan area browser. Anda pernah menjumpai sebuah iklan yang terus mengikuti kemanapun anda scroll?

Dan posisi tetapnya relatif terhadap jendela browser. Ini cara mereka bisa untuk membuat halaman-halaman ini, di mana kadang-kadang Anda mendapatkan pop up dan dan Anda tidak bisa membuatnya pergi. Anda terus menggulir dan menggulir, dan itu mengikuti Anda. Nah, bagaimana mereka melakukannya mereka telah menggunakan posisi tetap itu. Elemen itu tidak akan bergerakbahkan jika jendela digulir. Jadi ketika Anda sedang memikirkan posisi kotak pop up yang tidak akan pergi. Atau Anda mungkin juga ingin menganggapnya sebagai navigasi yang lebih berguna ketika pengguna berada di halaman, dan Anda mungkin memilikinya bilah navigasi yang ada di bagian atas, dan saat Anda menggulir halaman, Anda tidak perlu menggulir ke atas untuk melihat bilah navigasi, karena selalu ada di sana.

<!DOCTYPE html>
<html>
<head>
    <style>
        div.fixed {
            position: fixed;
            top 10px;
            left: 30px;
            width: 300px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>

    <p>Contoh Elemen Fixed silahkan anda gulir:</p>
    <div class="fixed">INFO PENTING
    </div><br /><br /><br /><br />
    <p>article......................................................................................</p><br /><br /><br /><br /><br /><br />
    <p>article..................................................................................................</p><br /><br /><br /><br /><br /><br />
    <p>article......................................................................................</p><br /><br /><br /><br /><br /><br />

</body>
</html>

Paragraf atau elemen INFO PENTING akan bergerak mengikuti kemanapun anda scroll