Kedudukan - Trik CSS | CSS Almanac 2025

Properti positionini dapat membantu anda memanipulasi lokasi elemen, seperti:

.element ( position: relative; top: 20px; )

Sehubungan dengan kedudukan asalnya, elemen di atas sekarang akan diturunkan dari atas dengan 20 piksel. Sekiranya kita menghidupkan sifat-sifat ini, kita dapat melihat seberapa banyak kawalan yang diberikan kepada kita (walaupun ini bukan idea yang baik untuk alasan prestasi):

relativehanya satu daripada enam nilai untuk positionharta tanah. Berikut adalah yang lain:

Nilai

static: setiap elemen mempunyai kedudukan statik secara lalai, jadi elemen tersebut akan berpegang pada aliran halaman biasa. Oleh itu, jika terdapat set kiri / kanan / atas / bawah / z-indeks maka tidak akan ada kesan pada elemen tersebut.
relative: kedudukan asal elemen tetap dalam aliran dokumen, sama seperti staticnilainya. Tetapi sekarang kiri / kanan / atas / bawah / z-indeks akan berfungsi. Sifat kedudukan "mendorong" elemen dari kedudukan asal ke arah itu.
absolute: elemen dikeluarkan dari aliran dokumen dan elemen lain akan bertindak seolah-olah tidak ada di sana sementara semua sifat kedudukan lain akan berfungsi di atasnya.
fixed: elemen dikeluarkan dari aliran dokumen seperti elemen yang betul-betul diposisikan. Sebenarnya mereka berkelakuan hampir sama, hanya elemen kedudukan tetap selalu berkaitan dengan dokumen, bukan ibu bapa tertentu, dan tidak terpengaruh dengan menatal.
sticky(eksperimental): elemen tersebut diperlakukan seperti relativenilai sehingga lokasi tatal pada viewport mencapai ambang yang ditentukan, pada ketika elemen tersebut mengambil fixedposisi di mana ia disuruh melekat.
inherit: positionnilai tidak merangkumi , jadi ini dapat digunakan untuk memaksanya secara khusus, dan inheritnilai kedudukan dari induknya.

Mutlak

Sekiranya elemen anak mempunyai absolutenilai maka elemen induk akan bersikap seolah-olah anak itu tidak ada sama sekali:

.element ( position: absolute; )

Dan apabila kita cuba untuk menetapkan nilai-nilai lain seperti left, bottomdan rightkita akan mendapati bahawa unsur anak itu menjawab tidak kepada dimensi induknya, tetapi dokumen itu:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Untuk menjadikan elemen anak berada betul-betul dari elemen induknya, kita perlu meletakkannya pada elemen induk itu sendiri:

.parent ( position: relative; )

Sekarang harta seperti left, right, bottomdan topakan merujuk kepada unsur ibu bapa, supaya jika kita membuat unsur anak telus kita dapat melihat ia duduk betul-betul di bawah induk:

Memperbaiki

Lihat elemen anak dalam demo di bawah ini dan bagaimana, setelah anda menatal, elemen ini terus melekat di bahagian bawah halaman:fixedabsolute

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome	Firefox	IE	Hujung	Safari
4	2	7	12	3.1

Mudah Alih / Tablet

Android Chrome	Android Firefox	Android	Safari iOS
88	85	3	8

Melekit

Yang stickynilai adalah seperti kompromi antara relativedan fixednilai-nilai. Pada penulisan ini, saat ini nilai eksperimen, yang bermaksud ia bukan sebahagian dari spesifikasi rasmi dan hanya sebahagiannya diadopsi oleh penyemak imbas terpilih. Dengan kata lain, mungkin bukan idea terbaik untuk menggunakannya di laman web produksi langsung.

Apa yang dilakukannya? Oleh itu, ia membolehkan anda meletakkan elemen relatif dengan apa sahaja pada dokumen dan kemudian, setelah pengguna menatal melewati titik tertentu di ruang pandang, betulkan kedudukan elemen ke lokasi tersebut sehingga tetap dipaparkan secara berterusan seperti elemen dengan fixednilai.

Ambil contoh berikut:

.element ( position: sticky; top: 50px; )

Elemen tersebut akan diposisikan secara relatif sehingga lokasi tatal dari sudut pandang mencapai titik di mana elemen akan berada 50pxdari bahagian atas ruang pandang. Pada ketika itu, elemen menjadi melekit dan tetap berada di fixedkedudukan 50pxatas skrin.

Demo berikut menggambarkan titik itu, di mana navigasi atas adalah relativekedudukan lalai dan navigasi kedua ditetapkan ke stickybahagian paling atas viewport. Harap maklum bahawa demo hanya akan berfungsi di Chrome, Safari dan Opera pada saat penulisan ini.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.