Atas / bawah / kiri / kanan - Trik CSS

The top, bottom, left, dan rightproperti yang digunakan dengan posisi untuk mengatur penempatan elemen. Mereka hanya berpengaruh pada elemen yang diposisikan, yang merupakan elemen dengan positionproperti yang disetel ke selain static. Sebagai contoh: relative, absolute, fixed, atau sticky.

div ( : || || auto || inherit; )

Anda dapat menggunakannya, misalnya, untuk mendorong ikon ke tempatnya:

button .icon ( position: relative; top: 1px; )

Atau posisikan elemen khusus di dalam wadah.

.container ( position: relative; ) .container header ( position: absolute; top: 0; )

Nilai untuk top, bottom, left, dan rightdapat salah satu dari berikut ini:

• salah satu panjang CSS yang valid
• persentase dari elemen penampung tinggi (untuk topdan bottom) atau lebar (untuk leftdan right)
• auto
• inherit

Elemen umumnya akan menjauh dari sisi tertentu jika nilainya positif, dan ke arahnya jika nilainya negatif. Pada contoh di bawah ini, panjang positif untuk topmemindahkan elemen ke bawah (menjauh dari atas) dan panjang negatif untuk topakan memindahkan elemen ke atas (ke arah atas):

Lihat Pen
Top: nilai positif dan negatif oleh Matsuko Friedland (@missmatsuko)
di CodePen.

Posisi

Penempatan elemen dengan nilai top, bottom, left, atau righttergantung pada nilai untuk position. Mari kita lihat apa yang terjadi ketika kita menetapkan nilai yang sama untuk topelemen dengan nilai yang berbeda position.

static

The topproperti tidak berpengaruh pada unsur unpositioned (elemen dengan positionset untuk static). Beginilah cara elemen diposisikan secara default. Anda bisa menggunakan position: static;sebagai salah satu metode untuk membatalkan efek toppada sebuah elemen.

relative

Ketika topdiset pada sebuah elemen dengan positionset to relative, elemen tersebut akan bergerak ke atas atau ke bawah sehubungan dengan penempatan aslinya dalam dokumen.

Lihat Pen
Top: relative oleh Matsuko Friedland (@missmatsuko)
di CodePen.

absolute

Saat topdisetel pada elemen dengan positionset ke absolute, elemen akan bergerak ke atas atau ke bawah dalam kaitannya dengan leluhur terdekat yang diposisikan (atau dokumen, jika tidak ada leluhur yang diposisikan).

Dalam demo ini, kotak merah muda di sebelah kiri diposisikan 50px ke bawah dari atas halaman karena tidak memiliki elemen leluhur yang diposisikan. Kotak merah muda di sebelah kanan diposisikan 50px ke bawah dari atas induknya, karena induk memiliki positiondari relative.

Lihat Pen
Top: absolute oleh Matsuko Friedland (@missmatsuko)
di CodePen.

fixed

Saat topdisetel pada elemen dengan positionset to fixed, elemen akan bergerak ke atas atau ke bawah dalam kaitannya dengan area pandang browser.

Lihat Pen
Top: diperbaiki oleh CSS-Tricks (@ css-trick)
di CodePen.

Pada pandangan pertama, sepertinya tidak ada perbedaan antara absolutedan fixed. Perbedaannya terlihat ketika Anda membandingkannya pada halaman yang memiliki konten yang cukup untuk di-scroll. Saat Anda menggulir ke bawah, fixedelemen posisi selalu dalam tampilan, sementara absoluteelemen posisi menggulir menjauh.

Lihat Pen
Scrolling: diperbaiki vs. absolut oleh CSS-Tricks (@ css-trick)
di CodePen.

sticky

Saat topdisetel pada elemen dengan positionset to sticky, elemen akan bergerak ke atas atau ke bawah dalam kaitannya dengan leluhur terdekat dengan kotak gulir (atau area pandang, jika tidak ada leluhur yang memiliki kotak gulir), terbatas pada batas elemen penampungnya.

Pengaturan toppada stickyelemen diposisikan tidak berbuat banyak kecuali wadah lebih tinggi dari itu, dan Anda memiliki konten yang cukup untuk gulir. Seperti halnya fixed, elemen akan tetap terlihat saat Anda menggulir. Tidak seperti fixed, elemen akan tidak terlihat setelah mencapai tepi elemen penampungnya.

Lihat Pen
Scrolling: fixed vs. sticky by CSS-Tricks (@ css-trick)
di CodePen.

Gotchas

Pengaturan sisi berlawanan

Anda dapat menetapkan nilai untuk masing-masing top, bottom, left, dan rightpada satu elemen. Saat Anda menetapkan nilai untuk sisi berlawanan ( topdan bottom, atau leftdan right), hasilnya mungkin tidak selalu seperti yang Anda harapkan.

Dalam kebanyakan kasus, bottomdiabaikan jika topsudah disetel, dan rightdiabaikan jika leftsudah disetel. Ketika arah disetel ke rtl(kanan ke kiri), leftdiabaikan alih-alih right. Agar setiap nilai memiliki efek, elemen harus positiondisetel ke absoluteatau fixeddan heightdisetel ke auto(default).

Dalam contoh ini, kami menetapkan top, bottom, left, dan rightuntuk `20px`, dan mengharapkan setiap sisi kotak batin untuk menjadi 20px jauh dari sisi luar kotak:

Lihat
Pengaturan Pena atas, bawah, kiri, dan kanan dengan CSS-Tricks (@ css-trick)
di CodePen.

Saat diperbaiki tidak relatif terhadap viewport

Elemen dengan positionset ke fixedtidak selalu diposisikan dalam kaitannya dengan viewport. Ini akan diposisikan relatif terhadap nenek moyang terdekatnya dengan transform, perspectiveatau filterset properti untuk apa pun selain none, jika ada.

Menambah atau menghapus ruang

Jika Anda telah memposisikan elemen dan menemukan bahwa sekarang ada ruang kosong atau tidak cukup ruang di tempat yang Anda harapkan, ini mungkin berkaitan dengan apakah elemen masuk atau keluar dari alur dokumen.

Ketika sebuah elemen dikeluarkan dari alur dokumen, itu berarti ruang yang semula digunakan pada halaman menghilang. Ini adalah kasus ketika elemen diposisikan absoluteatau fixed. Dalam contoh ini, kotak berisi elemen yang diposisikan secara absolut telah diciutkan karena elemen yang diposisikan secara absolut telah dihapus dari aliran dokumen:

Lihat
alur Dokumen Pena oleh Matsuko Friedland (@missmatsuko)
di CodePen.

Dukungan Browser

Anda dapat mengintip, tetapi tidak ada masalah lintas browser untuk topproperti tersebut. Gunakan sesuka hati.