tutorial pengembangan web terbaru
 

CSS Layout - Posisi Properti


The position properti menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).


Posisi Properti

The position properti menentukan jenis metode penentuan posisi yang digunakan untuk elemen.

Ada empat nilai posisi yang berbeda:

  • static
  • relative
  • fixed
  • absolute

Elemen kemudian diposisikan menggunakan bagian atas, bawah, kiri, dan properti yang tepat. Namun, sifat ini tidak akan bekerja kecuali position properti diatur pertama. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.


position: static;

elemen HTML diposisikan statis secara default.

elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan properti yang tepat.

Sebuah elemen dengan position: static; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:

Ini <div> elemen memiliki position: static;

Berikut adalah CSS yang digunakan:

Contoh

div.static {
    position: static;
    border: 3px solid #73AD21;
}
Cobalah sendiri "

position: relative;

Sebuah elemen dengan position: relative; diposisikan relatif terhadap posisi normal.

Mengatur atas, kanan, bawah, dan sifat kiri dari elemen yang relatif strategis akan menyebabkan ia disesuaikan jauh dari posisi normal. konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen.

Ini <div> elemen memiliki position: relative;

Berikut adalah CSS yang digunakan:

Contoh

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
Cobalah sendiri "

position: fixed;

Sebuah elemen dengan position: fixed; diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman tersebut menggulir. atas, kanan, bawah, dan sifat kiri digunakan untuk posisi elemen.

Unsur tetap tidak meninggalkan celah di halaman mana itu biasanya telah berada.

Perhatikan elemen tetap di sudut kanan bawah halaman. Berikut adalah CSS yang digunakan:

Contoh

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
Cobalah sendiri "
Ini <div> elemen memiliki position: fixed;

position: absolute;

Sebuah elemen dengan position: absolute; diposisikan relatif terhadap nenek moyang terdekat diposisikan (bukan relatif diposisikan untuk viewport, seperti tetap).

Namun; jika elemen diposisikan mutlak tidak memiliki nenek moyang strategis, menggunakan badan dokumen, dan bergerak bersama dengan halaman bergulir.

Catatan: "positioned" elemen adalah salah satu yang posisinya apa-apa kecuali static .

Berikut ini adalah contoh sederhana:

Ini <div> elemen memiliki position: relative;
Ini <div> elemen memiliki position: absolute;

Berikut adalah CSS yang digunakan:

Contoh

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
Cobalah sendiri "

Tumpang Tindih Elements

Ketika elemen diposisikan, mereka dapat tumpang tindih elemen lainnya.

The z-index properti menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Ini adalah heading

Karena gambar memiliki z-index -1, itu akan ditempatkan di belakang teks.

Contoh

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
Cobalah sendiri "

Sebuah elemen dengan pesanan tumpukan besar selalu di depan sebuah elemen dengan urutan tumpukan yang lebih rendah.

Catatan Catatan: Jika dua elemen diposisikan tumpang tindih tanpa z-index yang ditentukan, unsur diposisikan terakhir dalam kode HTML akan ditampilkan di atas.

Positioning Teks Dalam Gambar

Bagaimana posisi teks di atas gambar:

Contoh

Norway
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Cobalah sendiri:

Top Left » Kanan Atas» Kiri Bawah » Bawah Kanan» Centered »

contoh

Contoh lebih

Mengatur bentuk elemen
Contoh ini menunjukkan bagaimana untuk mengatur bentuk elemen. Unsur ini dipotong menjadi bentuk ini, dan ditampilkan.

Bagaimana menampilkan melimpah di sebuah elemen menggunakan scroll
Contoh ini menunjukkan bagaimana untuk mengatur properti overflow untuk membuat scroll bar bila konten elemen ini terlalu besar untuk muat di area tertentu.

Cara mengatur browser untuk secara otomatis menangani luapan
Contoh ini menunjukkan bagaimana untuk mengatur browser untuk secara otomatis menangani meluap.

Mengubah kursor
Contoh ini menunjukkan bagaimana untuk mengubah kursor.


Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »


Semua CSS Positioning Properti

Milik Deskripsi
bottom Menetapkan margin tepi bawah untuk kotak diposisikan
clip Klip elemen benar-benar diposisikan
cursor Menentukan jenis kursor yang akan ditampilkan
left Set tepi margin kiri untuk kotak diposisikan
overflow Menentukan apa yang terjadi jika konten meluap kotak elemen ini
overflow-x Menentukan apa yang harus dilakukan dengan kiri / kanan tepi konten jika meluap area konten elemen
overflow-y Menentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika meluap area konten elemen
position Menentukan jenis posisi untuk suatu elemen
right Menetapkan margin tepi kanan untuk kotak diposisikan
top Menetapkan margin tepi atas untuk kotak diposisikan
z-index Menetapkan urutan tumpukan elemen