Atas / bawah / kiri / kanan - Trik CSS

Yang top, bottom, left, dan rightsifatnya digunakan dengan kedudukan untuk menetapkan penempatan unsur. Mereka hanya berpengaruh pada elemen yang diposisikan, yang merupakan elemen dengan positionsifat yang ditetapkan kepada yang lain daripada static. Sebagai contoh: relative, absolute, fixed, atau sticky.

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

Anda mungkin menggunakannya, misalnya, untuk memasukkan ikon ke tempatnya:

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

Atau letakkan elemen khas di dalam bekas.

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

Nilai untuk top, bottom, left, dan rightboleh mana-mana yang berikut:

• panjang CSS yang sah
• peratusan tinggi elemen yang mengandungi (untuk topdan bottom) atau lebar (untuk leftdan right)
• auto
• inherit

Elemen pada amnya akan menjauh dari sisi tertentu ketika nilainya positif, dan ke arahnya ketika nilainya negatif. Dalam contoh di bawah, panjang positif untuk topmenggerakkan elemen ke bawah (jauh dari atas) dan panjang negatif untuk topmenggerakkan elemen ke atas (ke arah atas):

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

Kedudukan

Penempatan unsur dengan nilai untuk top, bottom, left, atau rightbergantung kepada nilai untuk position. Mari kita lihat apa yang berlaku apabila kita menetapkan nilai yang sama untuk topelemen dengan nilai yang berbeza untuk position.

static

The topharta mempunyai kesan ke atas unsur-unsur unpositioned (unsur-unsur dengan positionset untuk static). Ini adalah bagaimana elemen diletakkan secara lalai. Anda boleh menggunakan position: static;sebagai satu kaedah untuk mengurungkan kesan toppada elemen.

relative

Apabila topdiatur pada elemen dengan positionset ke relative, elemen akan bergerak naik atau turun sehubungan dengan penempatan asalnya dalam dokumen.

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

absolute

Apabila topdiatur pada elemen dengan positionset ke absolute, elemen akan bergerak ke atas atau ke bawah sehubungan dengan nenek moyangnya yang terdekat (atau dokumennya, jika tidak ada nenek moyang yang berposisi).

Dalam demo ini, kotak merah jambu di sebelah kiri diletakkan 50 piksel ke bawah dari bahagian atas halaman kerana tidak mempunyai unsur nenek moyang. Kotak merah jambu di sebelah kanan ini diletakkan 50px turun dari bahagian atas ibu bapa, kerana ibu bapa yang mempunyai positionsatu relative.

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

fixed

Apabila topdiatur pada elemen dengan positiondiset ke fixed, elemen akan bergerak ke atas atau ke bawah sehubungan dengan paparan penyemak imbas.

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

Pada pandangan pertama, nampaknya tidak ada perbezaan antara absolutedan fixed. Perbezaannya dapat dilihat apabila anda membandingkannya di halaman yang mempunyai cukup kandungan untuk menatal. Semasa anda menatal ke bawah, fixedelemen kedudukan selalu dilihat, sementara absoluteelemen kedudukan menatal pergi.

Lihat Pen
Skrol: tetap berbanding mutlak oleh CSS-Tricks (@ css-tricks)
di CodePen.

sticky

Apabila topdiatur pada elemen dengan positionset ke sticky, elemen akan bergerak ke atas atau ke bawah sehubungan dengan nenek moyang terdekat dengan kotak gulir (atau ruang pandang, jika tidak ada nenek moyang yang mempunyai kotak gulir), terbatas pada batas elemen yang mengandunginya.

Menetapkan toppada stickyunsur kedua tidak berbuat banyak kecuali bekasnya adalah lebih tinggi daripada itu, dan anda mempunyai kandungan yang cukup untuk tatal. Seperti fixed, elemen akan tetap kelihatan semasa anda menatal Tidak seperti itu fixed, elemen tersebut akan hilang dari pandangan setelah mencapai tepi elemen yang mengandunginya.

Lihat Pen
Scrolling: tetap vs melekat oleh CSS-Tricks (@ css-tricks)
di CodePen.

Gotchas

Menetapkan sisi yang bertentangan

Anda boleh menetapkan nilai bagi setiap top, bottom, left, dan rightpada elemen tunggal. Apabila anda menetapkan nilai untuk sisi yang berlawanan ( topdan bottom, atau leftdan right), hasilnya mungkin tidak selalu seperti yang anda harapkan.

Dalam kebanyakan kes, bottomdiabaikan jika topsudah ditetapkan, dan rightdiabaikan jika leftsudah ditetapkan. Apabila arah diatur ke rtl(kanan ke kiri), leftdiabaikan bukan right. Dalam usaha untuk setiap nilai untuk mempunyai kesan, elemen mesti mempunyai positionset ke absoluteatau fixeddan heightset untuk auto(lalai).

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

Lihat Pen
Setting atas, bawah, kiri, dan kanan dengan CSS-Tricks (@ css-tricks)
di CodePen.

Apabila diperbaiki tidak berkaitan dengan pandangan

Elemen dengan positionset fixedtidak selalu diposisikan dalam kaitannya dengan ruang pandang. Ia akan diletakkan berbanding dengan nenek moyang yang paling dekat dengan transform, perspectiveatau filterset harta kepada apa-apa selain daripada none, sekiranya ada.

Menambah atau membuang ruang

Sekiranya anda memposisikan elemen dan mendapati bahawa sekarang ada ruang kosong atau tidak cukup ruang di mana anda harapkan, itu mungkin berkaitan dengan apakah elemen itu masuk atau keluar dari aliran dokumen.

Apabila elemen dikeluarkan dari aliran dokumen, ini bermaksud bahawa ruang yang asalnya diambil di halaman akan hilang. Ini berlaku apabila elemen diposisikan absoluteatau fixed. Dalam contoh ini, kotak berisi elemen yang diposisikan benar-benar runtuh kerana elemen yang diposisikan benar-benar dikeluarkan dari aliran dokumen:

Lihat
aliran Dokumen Pen oleh Matsuko Friedland (@missmatsuko)
di CodePen.

Sokongan Penyemak Imbas

Anda boleh mengintip, tetapi tidak ada masalah silang penyemak imbas untuk topharta tanah. Gunakan sesuka hati.