Perbedaan antara pemosisian statis dan relatif

89

Di CSS, apa perbedaan antara pemosisian statis (default) dan pemosisian relatif?

css static positioning css-position jrdioko
sumber
21
Perbedaannya adalah Anda sering mengetik position: relative, dan Anda tidak pernah mengetik position: static:)
tigapuluhdot

Jawaban:

169

Pemosisian statis adalah model pemosisian default untuk elemen. Mereka ditampilkan di halaman tempat mereka dirender sebagai bagian dari aliran HTML normal. Elemen statis diposisikan tidak mematuhi left, top, rightdan bottomaturan:

elemen yang diposisikan secara statis mematuhi aliran HTML normal.

Pemosisian relatif memungkinkan Anda untuk menentukan offset tertentu ( left, topdll) yang relatif terhadap posisi normal elemen dalam aliran HTML. Jadi jika saya memiliki kotak teks di dalam a, divsaya dapat menerapkan pemosisian relatif pada kotak teks untuk menampilkannya di tempat tertentu relatif terhadap tempat biasanya ditempatkan di dalam div:

elemen yang diposisikan secara relatif mematuhi aliran HTML, tetapi memberikan kemampuan untuk menyesuaikan posisinya secara relatif ke posisi normalnya dalam aliran HTML.

Ada juga pemosisian absolut - di mana Anda menentukan lokasi yang tepat dari elemen relatif terhadap seluruh dokumen, atau elemen yang diposisikan secara relatif berikutnya lebih jauh dari pohon elemen :

elemen yang benar-benar diposisikan diambil dari aliran HTML dan dapat ditempatkan di tempat tertentu dalam dokumen ...

Dan ketika a position: relativediterapkan ke elemen induk dalam hierarki:

... atau diposisikan relatif terhadap elemen induk pertama di pohon HTML yang posisinya relatif.

Perhatikan bagaimana elemen posisi-absolut kita terikat oleh elemen yang memiliki posisi relatif.

Dan terakhir ada yang diperbaiki. Pemosisian tetap membatasi elemen ke posisi tertentu di viewport, yang tetap di tempatnya selama pengguliran:

elemen posisi tetap juga dikeluarkan dari aliran HTML, tetapi tidak terikat oleh area pandang dan tidak akan menggulir dengan laman.

Anda juga dapat mengamati perilaku bahwa elemen dengan posisi tetap tidak menyebabkan scroll karena tidak dianggap terikat oleh viewport:

elemen posisi tetap tidak berpengaruh pada gulir.

Sedangkan elemen yang diposisikan secara mutlak masih terikat oleh viewport dan akan menyebabkan pengguliran:

elemen yang diposisikan secara absolut masih dipengaruhi oleh batas viewport, kecuali overflow digunakan pada elemen induk.

..kecuali tentu saja elemen induk Anda gunakan overflow: ?untuk menentukan perilaku scroll (jika ada).

Dengan pemosisian absolut dan pemosisian tetap, elemen diambil dari aliran HTML.

Matthew Abbott
sumber
4
Jawaban yang bagus, tetapi (untuk posisi relatif) bukankah offset didasarkan pada posisi normal elemen?
Baztoune
4
Saya setuju dengan Baztoune, definisi untuk elemen yang diposisikan secara relatif ini menyesatkan. A staticdan relativeelemen adalah sama, kecuali dengan yang terakhir Anda dapat memposisikan ulang relatif ke posisi aslinya , bukan ke elemen yang memuatnya - di situlah tempatnya absolute. Juga, seperti elemen apa pun yang diposisikan menggunakan nilai selain staticyang dapat Anda gunakan z-index.
Ryan Williams
Saya telah mengerjakan ulang jawaban ini untuk menentukan pemosisian relatif secara lebih akurat dan menyertakan gambar untuk menunjukkan jenis posisi yang berbeda.
Matthew Abbott
3
Saya bertanya-tanya mengapa CSS masih menerapkan position: static;alih-alih hanya menggantinya dengan position: relative;secara default? Jika seseorang tidak ingin memposisikan item selain top: 0;dan left: 0;kemudian jangan melakukannya, bukan? Apakah ada alasan yang mendasari mengapa position: static;masih diperlukan sebagai bagian dari CSS?
cram2208
8
@ cram2208 karena relative membuat anak-anak node diposisikan absolut diposisikan relatif terhadap mereka, statis memungkinkan anak-anak diposisikan absolut untuk mengabaikan posisinya dan diposisikan relatif terhadap elemen posisi relatif terdekat. Ini adalah konsep yang penting untuk dimiliki
Felype
7

Anda dapat melihat gambaran umum sederhana di sini: W3School

Juga, jika saya ingat dengan benar, ketika mendeklarasikan relatif elemen, secara default akan tetap di tempat yang sama seperti yang seharusnya, tetapi Anda mendapatkan kemampuan untuk benar-benar memposisikan elemen di dalamnya secara relatif ke elemen ini, yang menurut saya sangat berguna di masa lalu.

Stoffe
sumber
29
w3sekolah ... Saya tidak akan meremehkan ini tetapi Anda harus hidup dengan rasa malu.
Myles Grey
4
Sementara itu, di tahun 2017, W3Schools tidak seburuk dulu (masih belum sempurna, tapi mereka menanggapi reaksi komunitas dengan serius dan benar-benar meningkat).
Priidu Neemre
Sementara itu, di tahun 2018 lalu, W3Schools masih belum separah dulu lagi, tapi kasihan mereka karena reputasi mereka sampai hari ini masih sebatas penyebutan komentar pertama di atas kepada developer lain, masih mendapat tawa klasik ... kembali di hari saya ... W3School .... kesan pertama hei ...
redfox05
7

Sebagai jawaban atas "mengapa CSS masih mengimplementasikan position: static;" dalam satu scenerio, menggunakan position: relative untuk induk dan position: absolute untuk anak membatasi lebar penskalaan anak. Dalam sistem menu horizontal, di mana Anda bisa memiliki 'kolom' link, menggunakan 'width: auto' tidak bekerja dengan orang tua relatif. Dalam hal ini, mengubahnya menjadi 'statis' akan memungkinkan lebar menjadi variabel yang bergantung pada konten di dalamnya.

Saya menghabiskan beberapa jam bertanya-tanya mengapa saya tidak bisa menyesuaikan wadah saya berdasarkan jumlah konten di dalamnya. Semoga ini membantu!

pengguna3233352
sumber
Inilah jawabannya! Semua orang memberi tahu para profesional hanya untuk pemosisian relatif, kehilangan poin dalam pertanyaan seperti ini: apa bedanya.
Bartis Áron
5

Posisi relatif memungkinkan Anda menggunakan atas / bawah / kiri / kanan untuk penentuan posisi. Statis tidak akan membiarkan Anda melakukan ini kecuali Anda menggunakan parameter margin. Ada perbedaan antara Top dan margin-top.

Anda tidak perlu menggunakan statis seperti defaultnya

bagian depan
sumber
2

Posisi relatif relatif terhadap aliran normal. Posisi relatif elemen itu (dengan offset) adalah relatif terhadap posisi di mana elemen tersebut akan normal jika tidak dipindahkan.

AvadhootKulkarni
sumber
2

Matthew Abbott punya jawaban yang sangat bagus.

Mutlak dan barang-barang diposisikan relatif taat top, left, rightdan bottomperintah (offset) di mana statis diposisikan item tidak.

Item yang diposisikan secara relatif memindahkan offset dari tempatnya biasanya di html.

Item yang diposisikan absolut memindahkan offset dari dokumen atau elemen yang diposisikan relatif berikutnya ke atas pohon DOM.

Connor Leech
sumber
0

Statis: Elemen yang diposisikan STATIC adalah apa yang kita dapatkan dengan DEFAULT (Pemosisian objek normal).

Relatif: Relatif dengan posisinya saat ini, tetapi dapat dipindahkan. Atau elemen posisi RELATIF diposisikan relatif terhadap dirinya sendiri.

Arif
sumber
0

statis dan relatif adalah atribut posisi. relatif digunakan untuk banyak kegunaan. Tidak untuk satu pun. Namun perlu diingat bahwa statis dan relatif tidak membahayakan aliran dokumen normal Html. static adalah posisi default ketika Anda menulis elemen apa pun ke Html. Jika sebuah elemen memiliki posisi relatif, elemen itu dapat diposisikan relatif terhadap tempat asalnya. Jika Anda ingin mengatur elemen dari ruang kecil, gunakan relative position sehingga Anda tidak perlu menambahkan margin, padding, dll jika elemen tersebut memiliki posisi relative dan memiliki elemen turunan. Di sini kita bisa melakukan pengukuran relatif terhadap induknya. Jika Anda menambahkan lebar 10% ke anak, itu berarti (lebar + bantalan) x10%. Tetapi Anda tidak menambahkan kata kunci relatif, Anda mendapatkan lebarx10%. Selain itu, penggunaan kerabat yang paling penting adalah; Anda dapat memposisikan elemen apa pun di atasnya.

Lakruwan Pathirage
sumber