Berikut ini adalah pertanyaan dari nasyaspt7 pada mata pelajaran TI untuk jenjang Sekolah Menengah Pertama
Menampilkan element relatif dari viewport
B
Element akan berpindah posisi jika halaman browser di-scroll
C
Posisi fixed bisa terpengaruh oleh properti top, bottom, right, dan left
Jawaban dan Penjelasan
Berikut ini adalah pilihan jawaban terbaik dari pertanyaan diatas.
Jawaban:
Static
Value static merupakan nilai default dari position suatu element. Value static akan membuat suatu element bertumpukan . Untuk melihat hasil dari penggunaan value static buat file html dengan code berikut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: static;
}
.yellow {
background-color: yellow;
position: static;
}
</style>
</head>
<body>
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</body>
</html>
dari code tersebut kita akan mendapatkan tampilan sebagai berikut
dari hasil terlihat bahwan layer dari masing masing class bertumpukan sebagaimana tumpukan barang dalam dunia real
relative
Value relative digunakan untuk membuat suatu element bisa dipindah pindahkan . By default elemen memang tumpukan sebagaimana pada value static, tetapi kita bisa memindahkan elemen tersebut dengan property seperti top , left. Sehingga elemen tersebut akan menindihi layernya elemen lain. Untuk melihat efek dari penggunaan property relative ubah css dari class red menjadi sebagai berikut
.red {
background-color: red;
position: relative;
top: 10px;
}
dari hasil di atas tampak div dari class red bergeser ke bawah menimpa class yellow dengan elemen yang lain tetep berada pada posisi awal ketika elemen class red tidak dipindahkan.
absolute
Value absolute digunakan untuk membuat suatu elemen bisa dipindahkan dan membuat elemen mengambang ke atas dibanding element lain. Bedanya dengan property relative, pada property absolute layer bawahnya akan bergeser seolah olah berada di bawah layer dengan property relative. Untuk melihat efeknya mari kita ubah css dari class red menjadi seperti berikut
.red {
background-color: red;
position: absolute;
top: 10px;
}
fixed
Value fixed digunakan untuk membuat elemen mengambang di antara elemen elemen lain dan juga bisa dipindahkan posisinya. Property ini mirip dengan property absolute. Bedanya dengan property absolute adalah property dengan value fixed posisinya akan tetap berada di posisinya terhadap layar meskin layar page scroll. Lebih jelasnya ubah code body menjadi sebagai berikut
<div class="container">
<div class="green">Green</div>
<div class="red">Red</div>
<div class="yellow">Yellow</div>
</div>
Di bagian style css ubah menjadi seperti berikut
.container {
height: 1200px;
border: 1px solid #000000;
}
div {
padding: 10px;
}
.green {
background-color: green;
position: static;
}
.red {
background-color: red;
position: fixed;
top: 0px;
}
.yellow {
background-color: yellow
position: static;
}
Semoga dengan pertanyaan yang sudah terjawab oleh BelajarBareng123 dapat membantu memudahkan mengerjakan soal, tugas dan PR sekolah kalian.
Apabila terdapat kesalahan dalam mengerjakan soal, silahkan koreksi jawaban dengan mengirimkan email ke yomemimo.com melalui halaman Contact
Last Update: Sun, 23 Apr 23