Rumah > Artikel > hujung hadapan web > Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!

Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!

青灯夜游ke hadapan: 2021-09-17 11:21:332670semak imbas

Artikel ini akan menganalisis kedudukan mutlak dalam CSS dan membantu anda memahaminya dengan teliti, saya harap ia akan membantu anda!

Meletakkan elemen bukan tentang meletakkan elemen itu sendiri, sebaliknya kedudukan bekas elemen itu. Untuk dapat meletakkan dirinya sendiri, ia mesti mengetahui div induk yang mana ia akan diposisikan secara relatif. [Cadangan berkaitan: "tutorial video css"]

Kod berikut menunjukkan 4 div bersarang, .box-1 hingga .box-3 hanya melalui display: flex dan margin: auto untuk mencapai pemusatan. .box-4 tidak ditetapkan margin berada pada kedudukan lalai dalam aliran dokumen.

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4"></div>
      </div>
    </div>
  </div>
</body>

Tiada satu pun elemen yang mempunyai set atribut position >

Untuk meletakkan dirinya sendiri, elemen

body {
  display: flex;
}
.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

mesti mengetahui 2 perkara:

Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!

nilai yang ditetapkan oleh

,
, .box-4,

Berbanding dengan elemen induk yang hendak diletakkan

Apabila kami menambahkan atribut top pada right, kami mendapati ia dipisahkan daripada aliran dokumen biasa. Tanpa menetapkan sifat kedudukan, ia hanya kekal dalam kedudukan lalai, iaitu sudut kiri atas bekas induk. bottomleft

Tiada offset apabila meletakkan secara mutlak .box-4position: absolute

Dengan menambah

dan Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya! , elemen mesti Ketahui elemen mana yang akan berfungsi sebagai bekas rujukan untuk kedudukan. Anda boleh melihat bahawa elemen di sini diletakkan di sudut kiri atas skrin.

akan menyemak dahulu sama ada bekas induknya mempunyai set atribut

. Mula-mula, ia mendapati bahawa
tidak mempunyai set atribut kedudukan, kemudian ia naik satu tahap kepada .box-4 dan
dan mendapati bahawa kedua-duanya tidak mempunyai set atribut

yang boleh digunakan.

top: 0Akhirnya, left: 0 tidak dapat mencari elemen induk yang boleh digunakan sebagai rujukan kedudukan Pada akhirnya, .box-4 hanya boleh digunakan sebagai rujukan kedudukan. Elemen akhirnya diletakkan di penjuru kiri sebelah atas skrin: position.box-3.box-2.box-1position

Kedudukan mutlak, semua elemen induk belum menetapkan atribut .box-4 body

Apabila kami menetapkan Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya! untuk

mendapati terdapat rujukan kedudukan yang tersedia. Dan akhirnya mencapai kedudukan relatif kepada
: .box-4position

.box-1position: relative kedudukan mutlak, .box-4 kedudukan relatif, .box-1 dan

tidak berubah

Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!

Elemen yang diposisikan secara mutlak akan meletakkan dirinya secara relatif kepada unsur nenek moyangnya yang terdekat.

Setelah unsur nenek moyang yang tersedia ditemui, unsur lain tidak lagi berkaitan dengannya (seperti kotak2 dan kotak3). Gambar di bawah menunjukkan kesan selepas menetapkan .box-4 kepada .box-1 dan .box-2 masing-masing: .box-3

.box-2.box-3position:relative

Kedudukan mutlak,

dan Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya! Kedudukan relatif

Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!

Alamat asal: https://juejin.cn/post/7008462323316686862

Penulis: M 🎜>.box-4.box-2Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: .box-3Pengenalan kepada Pengaturcaraan
! !

Atas ialah kandungan terperinci Analisis mendalam tentang kedudukan mutlak dalam CSS dan pemahaman yang menyeluruh mengenainya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css auto display position margin flex https

Kenyataan：

Artikel ini dikembalikan pada:掘金--M酷. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Artikel pemula: Cara menggunakan CSS untuk melaksanakan animasi rangka mudah (perkongsian kod)Artikel seterusnya：Artikel pemula: Cara menggunakan CSS untuk melaksanakan animasi rangka mudah (perkongsian kod)

Artikel berkaitan

Lihat lagi