Perbedaan antara style = "position: absolute" dan style = "position: relative"

103

Adakah yang bisa memberi tahu saya Perbedaan antara style = "position:absolute"dan style = "position:relative" dan bagaimana perbedaannya jika saya menambahkannya ke div/ span/ inputelements?

Saya menggunakan absolutesekarang, tetapi saya ingin menjelajah relativejuga. Bagaimana ini akan mengubah pemosisian?

css css-position Varun
sumber
1
Properti 'posisi' di CSS 2.1.
Josh Lee
@rolfl Hm, apakah suntingan ini benar-benar diperlukan untuk pertanyaan berusia 3 tahun? Saya akan menyebutnya "terlalu kecil".
Mr Lister
3
@MrLister Itu muncul dalam antrian tinjauan 'edit yang disarankan' .... Saya tidak memperhatikan usia. Tetapi, jika itu adalah pertanyaan lama 60 detik, apakah itu akan membuat perbedaan?
rolfl
@rolfl Tidak juga; Saya masih akan memilih "terlalu kecil".
Tuan Lister

Jawaban:

178

Pemosisian absolut berarti bahwa elemen tersebut benar-benar keluar dari aliran normal tata letak halaman. Sejauh menyangkut elemen lainnya pada halaman, elemen yang benar-benar diposisikan tidak ada. Elemen itu sendiri kemudian ditarik secara terpisah, semacam "di atas" dari yang lainnya, pada posisi yang Anda tentukan menggunakan left, right, top and bottomatribut.

Menggunakan posisi yang Anda tentukan dengan atribut ini, elemen kemudian ditempatkan pada posisi itu dalam elemen leluhur terakhirnya yang memiliki atribut posisi selain static(elemen halaman default ke statis ketika tidak ada atribut posisi yang ditentukan), atau badan dokumen (browser viewport) jika leluhur tersebut tidak ada.

Misalnya, jika saya memiliki kode ini:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div>itu akan diposisikan 20px dari atas viewport browser, dan 20px dari tepi kiri yang sama.

Namun, jika saya melakukan hal seperti ini:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... maka innerdiv akan diposisikan 20px dari atas outerdiv, dan 20px dari tepi kiri yang sama, karena outerdiv tidak diposisikan dengan position:statickarena kami secara eksplisit mengaturnya untuk digunakan position:relative.

Pemosisian relatif, di sisi lain, sama seperti menyatakan tidak ada pemosisian sama sekali, tetapi left, right, top and bottomatribut "mendorong" elemen keluar dari tata letak normalnya. Elemen lainnya di halaman masih ditata seolah-olah elemen tersebut berada di tempat normalnya.

Misalnya, jika saya memiliki kode ini:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... maka ketiga <span>elemen akan duduk berdampingan tanpa tumpang tindih.

Jika saya menyetel yang kedua <span>untuk menggunakan pemosisian relatif, seperti ini:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... maka Span2 akan tumpang tindih dengan sisi kanan Span1 sebesar 5px. Span1 dan Span3 akan berada tepat di tempat yang sama seperti pada contoh pertama, meninggalkan celah 5px antara sisi kanan Span2 dan sisi kiri Span3.

Harapan itu menjelaskan sedikit.

AgentConundrum
sumber
39

Pemosisian relatif: Elemen membuat sumbu koordinatnya sendiri, di offset lokasi dari sumbu koordinat area pandang. Ini adalah bagian dari aliran dokumen tetapi bergeser.

Penentuan posisi absolut: Sebuah elemen mencari sumbu koordinat terdekat yang tersedia di antara elemen induknya. Elemen tersebut kemudian diposisikan dengan menentukan offset dari sumbu koordinat ini. Ini dihapus dari aliran normal dokumen.

masukkan deskripsi gambar di sini

Sumber

Premraj
sumber
15

Anda pasti ingin melihat artikel pemosisian ini dari 'A List Apart'. Membantu mengungkap pemosisian CSS (yang menurut saya tidak masuk akal, sebelum artikel ini).

jbrennan.dll
sumber
8

Dengan pemosisian CSS, Anda dapat menempatkan elemen tepat di tempat yang Anda inginkan di halaman Anda.

Saat Anda akan menggunakan pemosisian CSS, hal pertama yang perlu Anda lakukan adalah menggunakan posisi properti CSS untuk memberi tahu browser apakah Anda akan menggunakan pemosisian absolut atau relatif.

Kedua Posisi memiliki fitur yang berbeda. Dalam CSS Setelah Anda mengatur Posisi maka Anda dapat menggunakan atribut atas, kanan, bawah, kiri.

Posisi Mutlak

Elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi selain statis.

Posisi Relatif

Elemen yang diposisikan relatif diposisikan relatif terhadap posisi normalnya.

Untuk memposisikan elemen secara relatif, posisi properti ditetapkan sebagai relatif. Perbedaan antara penentuan posisi absolut dan relatif adalah cara penghitungan posisi.

Selengkapnya: Posisi Relatif vs Mutlak

GowriShankar
sumber
6

OK, jawaban yang sangat jelas di sini ... pada dasarnya relatif posisi relatif terhadap elemen sebelumnya atau jendela, sementara mutlak tidak peduli tentang unsur-unsur lain kecuali jika orang tua jika Anda menggunakan atas dan kiri ...

Lihatlah contoh yang saya buat untuk Anda untuk menunjukkan perbedaan ...

masukkan deskripsi gambar di sini

Anda juga dapat melihatnya beraksi, menggunakan css yang saya buat untuk Anda, Anda dapat melihat bagaimana posisi absolut dan relatif berperilaku:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}
<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>
Luaskan cuplikan

Alireza
sumber
4

Penentuan posisi absolut didasarkan pada koordinat tampilan:

position:absolute;
top:0px;
left:0px;

^ menempatkan elemen di kiri atas jendela.


Posisi relatif relatif terhadap tempat elemen ditempatkan:

position:relative;
top:1px;
left:1px;

^ menempatkan elemen 1px ke bawah dan 1px dari kiri tempat asalnya :)

Damien-Wright
sumber
3

Relatif:

  1. Elemen dengan position: relative;diposisikan relatif terhadap posisi normalnya.

  2. Jika Anda tidak menambahkan atribut pemosisian (atas, kiri, bawah, atau kanan) pada elemen relatif, hal itu tidak akan berpengaruh sama sekali pada pemosisiannya. Ini akan berperilaku persis sebagai position: staticelemen.

  3. Tetapi jika Anda menambahkan beberapa atribut pemosisian lainnya, katakanlah, top: 10px ;, itu akan menggeser posisinya 10 piksel ke bawah dari tempat biasanya.

  4. Elemen dengan jenis pemosisian ini dipengaruhi oleh elemen lain dan elemen itu sendiri juga memengaruhi elemen lain.

Mutlak:

  1. Elemen with position: absolute;memungkinkan Anda menempatkan elemen apa pun tepat di tempat yang Anda inginkan. Anda menggunakan atribut posisi atas, kiri, bawah. dan hak untuk mengatur lokasi.

  2. Itu ditempatkan relatif terhadap leluhur non-statis terdekat. Jika tidak ada penampung seperti itu, itu ditempatkan relatif terhadap halaman itu sendiri.

  3. Itu dihapus dari aliran normal elemen di halaman.

  4. Sebuah elemen dengan tipe positioning ini tidak terpengaruh oleh elemen lain dan juga tidak mempengaruhi aliran elemen lainnya.

Lihat contoh penjelasan diri ini untuk kejelasan yang lebih baik. https://codepen.io/nyctophiliac/pen/BJMqjX

Pransh Tiwari
sumber
0

Absolute menempatkan objek (div, span, dll.) Di lokasi paksa absolut (biasanya ditentukan dalam piksel) dan relative akan menempatkannya dalam jumlah tertentu jauh dari lokasi biasanya. Sebagai contoh:

posisi: relatif; kiri: -20px;

Mungkin membuat sisi kiri teks menghilang jika berada dalam jarak 20px ke tepi kiri layar.

Charles Zink
sumber
0

position: absolute dapat ditempatkan dimana saja dan tetap disana seperti 0,0.

position: relative ditempatkan dengan offset dari lokasi semula ditempatkan di browser.

Vil Ignoble
sumber
0

position: tindakan relatif sebagai elemen induk position: tindakan absolut anak dari posisi relatif. Anda bisa melihat contoh di bawah ini

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }
Imran Khan
sumber