Posisi Relatif vs Absolut?

Apa perbedaan antara position: relativedan position: absolutedalam CSS? Dan kapan sebaiknya Anda menggunakan yang mana?

Posisi CSS Mutlak

position: absolute;

Penentuan posisi absolut adalah yang termudah untuk dipahami. Anda mulai dengan positionproperti CSS :

position: absolute;

Ini memberi tahu browser bahwa apa pun yang akan diposisikan harus dihapus dari aliran normal dokumen dan akan ditempatkan di lokasi yang tepat di halaman. Ini tidak akan memengaruhi bagaimana elemen sebelum atau sesudahnya dalam HTML diposisikan pada halaman Web namun akan tergantung pada posisi orang tuanya kecuali Anda menimpanya.

Jika Anda ingin memposisikan elemen 10 piksel dari bagian atas jendela dokumen, Anda akan menggunakan topoffset di positionsana dengan absolutepemosisian:

position: absolute;
top: 10px;

Elemen ini kemudian akan selalu ditampilkan 10pxdari atas halaman terlepas dari konten apa yang melewati, di bawah atau di atas elemen (secara visual).

Empat properti penentuan posisi adalah:

1. top
2. right
3. bottom
4. left

Untuk menggunakannya, Anda harus menganggapnya sebagai properti offset. Dengan kata lain, elemen yang diposisikan right: 2pxtidak digerakkan ke kanan2px . Sisi kanan diimbangi dari sisi kanan jendela (atau posisinya menimpa orang tua) oleh 2px. Hal yang sama berlaku untuk tiga lainnya.

Posisi Relatif

position: relative;

Penentuan posisi relatif menggunakan empat properti penentuan posisi yang sama dengan absolute posisi. Tetapi alih-alih mendasarkan posisi elemen pada port tampilan browser, itu mulai dari tempat elemen itu jika masih dalam aliran normal .

Misalnya, jika Anda memiliki tiga paragraf di halaman Web Anda, dan yang ketiga memiliki position: relativegaya di atasnya, posisinya akan diimbangi berdasarkan lokasi saat ini - bukan dari sisi asli port tampilan.

Paragraf 1.

Paragraf 2.

Catatan:

• default widthsuatu elemen yang diposisikan mutlak adalah lebar konten di dalamnya, tidak seperti elemen yang relatif diposisikan di mana defaultnya widthadalah 100%ruang yang dapat diisi.

• Anda dapat memiliki elemen yang tumpang tindih dengan elemen yang benar-benar diposisikan, sedangkan Anda tidak dapat melakukan ini dengan elemen yang relatif diposisikan (yaitu secara alami tanpa menggunakan margin negatif / pemosisian)

banyak yang ditarik dari: sumber ini

Posisi "relatif" dan "absolut" benar-benar relatif, hanya dengan kerangka kerja yang berbeda. Penentuan posisi "Absolute" relatif terhadap posisi elemen penutup lainnya. Posisi "relatif" relatif terhadap posisi yang dimiliki elemen itu sendiri tanpa penentuan posisi.

Itu tergantung pada kebutuhan dan tujuan Anda yang mana yang Anda gunakan. Posisi "Relatif" cocok ketika Anda ingin menggeser elemen dari posisi yang seharusnya ada dalam aliran elemen, misalnya untuk membuat beberapa karakter muncul dalam posisi superskrip. Penentuan posisi "Absolute" cocok untuk menempatkan elemen dalam beberapa sistem koordinat yang ditetapkan oleh elemen lain, misalnya untuk "mencetak lebih banyak" gambar dengan beberapa teks.

Sebagai khusus, gunakan pemosisian "relatif" tanpa pemindahan (hanya pengaturan position: relative) untuk membuat elemen kerangka acuan, sehingga Anda dapat menggunakan pemosisian "absolut" untuk elemen yang ada di dalamnya (dalam markup).

Hal lain yang perlu diperhatikan adalah bahwa jika Anda ingin elemen absolut terbatas pada elemen induk maka Anda perlu mengatur posisi elemen induk menjadi relatif. Itu akan menjaga elemen anak yang terkandung di dalam elemen induk dan itu tidak akan "relatif" ke seluruh jendela.

Saya menulis posting blog yang memberikan contoh sederhana yang menciptakan pengaruh berikut:

Itu memiliki div hijau yang benar-benar diposisikan di bagian bawah div kuning induk.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Posisi Relatif:

Jika Anda menentukan posisi: relatif, maka Anda dapat menggunakan atas atau bawah, dan ke kiri atau kanan untuk memindahkan elemen relatif ke tempat biasanya terjadi dalam dokumen.

Posisi Mutlak:

Saat Anda menentukan posisi: absolut, elemen dihapus dari dokumen dan ditempatkan tepat di tempat yang Anda suruh.

Berikut ini adalah tutorial yang bagus http://www.barelyfitz.com/screencast/html-training/css/positioning/ dengan sampel penggunaan kedua posisi dengan posisi absolut dan relatif.

Relatif: Relatif terhadap posisi saat ini, tetapi dapat dipindahkan. Atau elemen posisi RELATIVE diposisikan relatif terhadap ITSELF.

Mutlak: Unsur yang diposisikan MUTLAK diposisikan relatif terhadap ORANG TUA TERTUTUP ITU. jika ada, maka itu berfungsi seperti tetap ..... relatif ke jendela.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Di sini, divposisi orangtua kedua adalah relatif sehingga tengah divakan mengubah posisinya sehubungan dengan orangtua kedua div. Jika divposisi orangtua pertama relatif, maka Middle divakan mengubah posisinya sehubungan dengan orangtua pertama div. Detail

Menempatkan jawaban, karena reputasi saya tidak cukup untuk berkomentar. Tapi jangan melihat ini sebagai jawaban, hanya info tambahan, karena saya sendiri, memiliki beberapa masalah dengan kedua footer, dan positioning.

Saat mengatur halaman, sehingga footer saya selalu berada di bagian bawah, dengan posisi absolut, dan wadah / pembungkus utama dengan posisi relatif.

Saya kemudian menemukan beberapa masalah dengan konten teks saya, dan menu di dalam konten yang sama (bagian putih dari halaman antara header dan footer), ketika mengatur ini menjadi absolut, footer tidak lagi berhenti.

Postitioning adalah, seperti yang Anda katakan tema yang kompleks.

Solusi saya, untuk konten yang saya inginkan di posisi 'absolut' di halaman web saya, dan tidak didorong ke samping, ketika misalnya membuka menu drop-down, adalah untuk benar-benar memberikannya posisi relatif, dan meletakkannya di bawah drop down saya. Tidak bisa. (35em adalah ketinggian menu dropdown saya, ketika sepenuhnya diperpanjang)

Kemudian, Top: -35em, untuk konten yang sebelumnya didorong ke samping. Dan kemudian menambahkan margin-bottom: -35em. Dengan cara ini, isinya "di bawah" menu drop down saya, tetapi secara visual itu berdampingan dengan menu drop down saya! Dan ruang putih di bawah hingga ke footer, hanya dengan margin 10em, seperti sebelum mulai bermain-main dengan ini. Jadi solusi saya untuk ini adalah seperti ini:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Saya melihat pertanyaan Anda dijawab dengan baik, tetapi setelah banyak masalah saya menemukan ini menjadi solusi yang sangat baik, dan cara untuk memahami lebih baik bagaimana positioning bekerja .. Ketika saya menempatkan konten teks saya, di bawah menu drop down saya, itu tidak t mendorong teks saya ke samping. Jika saya mengubah teks ke posisi absolut, catatan kaki tidak tetap di tempatnya. Karena saya percaya ini adalah masalah bagi lebih banyak orang daripada saya, saya menambahkan ini di sini. Apa yang sebenarnya terjadi adalah, saya meletakkan teks, di bawah, di bawah drop down saya.

Kemudian, secara visual saya meletakkannya tepat di sebelah satu sama lain, dengan posisi relatif, dan atas: -35em ;, dan keluar malam ruang besar di bawah ini, dengan margin: -35em;

nilai-nilai negatif kadang-kadang diremehkan, fungsionalitas yang sangat baik, ketika seseorang memahami posisi ini dengan lebih baik!

Secara alami, posisi tetap, juga tampak logis untuk catatan kaki saya, tetapi saya benar-benar ingin catatan kaki itu berada di bawah viewport, jika teks, atau konten, lebih panjang dari viewport. Dan untuk tetap di bagian bawah, jika ada sedikit konten di halaman.

Setupp ini memperbaikinya dengan sangat baik, dan ingatlah untuk menggunakan 'em', bukan 'px' untuk tata letak halaman yang lebih lancar / dinamis! :)

(mungkin ada solusi yang lebih baik, tetapi ini berfungsi untuk saya lintas platform, serta perangkat).

Relatif vs Mutlak:

• Perbedaan: relatif terhadap dirinya sendiri, relatif terhadap leluhur yang diposisikan terdekat.
• Perbedaan: Elemen-elemen lain di sekitarnya menghormati keberadaan lamanya, Elemen-elemen lain di sekitarnya TIDAK menghormati keberadaan lamanya.
• Kesamaan: Elemen-elemen lain di sekitarnya JANGAN menghormati keberadaan barunya, Elemen-elemen lain di sekitarnya JANGAN menghormati keberadaan barunya.

Mari kita bahas skenario untuk menjelaskan perbedaan antara absolut vs relatif.

Di dalam elemen body mengatakan Anda memiliki elemen header yang tingginya 95% dari ketinggian tampilan yaitu 95vh. Dalam wadah ini Anda menempatkan gambar dan mengurangi opacity-nya menjadi 0,5. Dan sekarang Anda ingin menempatkan gambar logo di dekat sudut kiri atas. Saya harap Anda mengerti skenarionya. Jadi Anda akan memiliki gambar yang lebih terang di bagian header dengan logo di atasnya pada posisi yang ditentukan.

Tetapi sebelum memulai ini, saya telah menetapkan margin dan padding ke 0 seperti ini

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Ini memastikan tidak ada margin dan bantalan default diterapkan ke elemen.

Sehingga Anda dapat mencapai kebutuhan Anda dengan dua cara.

Jalan Pertama

• Anda memberi kelas pada gambar say logo.

• di css kamu menulis

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• ini menempatkan logo pada 40px dari atas dan kiri induk terlampir yang merupakan header. Gambar akan muncul seolah ditempatkan sesuai keinginan.

Tetapi teman saya ini adalah desain yang buruk untuk menempatkan gambar yang Anda tidak perlu menghabiskan begitu banyak ruang di sekitar dengan memberinya margin ketika itu tidak diperlukan. Yang Anda butuhkan adalah menempatkan gambar ke lokasi itu. Anda berhasil dengan bantalan dengan margin sekitar. Margin mengambil ruang dan mendorong kontennya lebih dalam memberikan kesan bahwa itu diposisikan tepat di tempat yang Anda inginkan. Semoga Anda memahami masalah dengan mengatasinya seperti ini. Anda mengambil lebih banyak ruang daripada yang diperlukan untuk menempatkan hanya gambar di lokasi yang diinginkan.

Sekarang mari kita coba pendekatan yang berbeda.

Jalan Kedua

• gambar dengan kelas logo ada di dalam elemen header dengan kelas header. Jadi kelas induk adalah header dan kelas anak adalah logo seperti sebelumnya.

• Anda mengatur properti posisi kelas header menjadi relatif seperti ini

  .header{ position: relative; }

• maka Anda menambahkan properti berikut ke kelas logo

  .logo{ position:absolute; top:40px; left:40px }

Ini dia. Anda menempatkan gambar di tempat yang persis sama. Tidak akan ada perbedaan yang jelas dalam penentuan posisi dari mata telanjang antara pendekatan pertama dan pendekatan kedua. Tetapi jika Anda memeriksa elemen gambar, Anda akan menemukan bahwa itu tidak mengambil ruang ekstra. Ini menempati area yang persis sama dengan lebar dan tingginya sendiri.

Jadi bagaimana mungkin? Saya berkata kepada kelas logo gambar bahwa Anda akan ditempatkan relatif terhadap kelas header karena Anda adalah anak dari kelas ini dan bahwa saya secara khusus menyebutkan posisi itu sebagai relatif . Sehingga setiap anak dari itu akan ditempatkan relatif terhadap sudut kiri atas itu. Dan posisi Anda perlu diperbaiki di dalam elemen induk ini. jadi kamu diberikan absolut. Dan bahwa Anda perlu bergerak sedikit dari atas dan pergi ke posisi yang saya inginkan. Karenanya Anda diberi properti atas dan kiri dengan nilai 40px. Dengan cara ini Anda akan ditempatkan relatif hanya untuk orang tua Anda. Jadi, jika besok saya memindahkan orang tua Anda ke atas atau ke bawah atau ke mana saja, Anda akan selalu berada 40px di bagian atas dan kiri sudut kiri atas header orang tua Anda. Jadi posisi Anda tetap di dalam orang tua Anda, tidak peduli apakah posisi orang tua Anda tetap atau tidak di masa depan (karena tidak mutlak seperti Anda).

Jadi gunakan relatif dan absolut untuk orang tua dan anak masing-masing. Kedua gunakan ketika Anda hanya ingin menempatkan elemen anak di beberapa lokasi di dalam elemen induknya. Jangan gunakan pengisi seperti margin untuk mendorongnya dengan paksa. Berikan nilai relatif orang tua dan anak yang ingin Anda pindahkan, nilai absolut. Tentukan properti atas, kiri bawah atau kanan untuk kelas anak untuk menempatkannya di dalam induk di mana pun Anda inginkan.

Terima kasih.

Marco Pellicciotta: Posisi elemen di dalam elemen lain bisa relatif atau absolut, tentang elemen yang ada di dalamnya.

Jika Anda perlu memposisikan elemen dalam sudut pandang jendela browser, yang terbaik adalah menggunakan posisi: tetap