Apakah kedudukan mutlak dalam css

Dalam CSS, kedudukan mutlak ialah kaedah penentududukan yang menjadikan kedudukan elemen bebas daripada aliran dokumen. Kotak elemen yang ditetapkan kepada kedudukan mutlak dialih keluar sepenuhnya daripada aliran dokumen dan diposisikan relatif kepada blok yang mengandunginya secara lalai, kedudukan yang diposisikan secara mutlak adalah relatif kepada penyemak imbas, dan diposisikan bersama dengan bahagian atas, kanan, bawah dan kiri.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS, kedudukan mutlak ialah kaedah penentududukan yang menjadikan kedudukan elemen bebas daripada aliran dokumen.

Kotak elemen yang ditetapkan kepada kedudukan mutlak dialih keluar sepenuhnya daripada aliran dokumen dan diposisikan berbanding dengan blok yang mengandunginya, yang mungkin merupakan elemen lain dalam dokumen atau blok yang mengandungi awal. Secara lalai, kedudukan kedudukan mutlak adalah relatif kepada penyemak imbas, dan diletakkan dengan atas, kanan, bawah dan kiri. Ruang yang sebelum ini diduduki oleh elemen

dalam aliran dokumen biasa ditutup, seolah-olah elemen itu tidak wujud. Elemen menjana kotak peringkat blok selepas kedudukan, tanpa mengira jenis kotak yang asalnya dijana dalam aliran biasa.

Mari kita lihat dengan lebih dekat pada kedudukan mutlak (mutlak). Sebenarnya, kedudukan mutlak mutlak dan terapung separa adalah serupa jika anda boleh memahami terapung terapung, ia akan membantu untuk memahami kedudukan mutlak mutlak.

Mula-mula mari kita bercakap tentang persamaan antara mutlak dan terapung: Membungkus dan Sangat menipu

Membungkus

Bak kata pepatah, sekeping gambar bernilai seribu perkataan (cuma bezanya: p dalam gambar di bawah menambah mutlak)

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

Sekali mutlak atau terapung ditambah pada elemen, ia bersamaan dengan Tambah paparan: blok; Apakah maksudnya? Sebagai contoh, lebar lalai bagi rentang elemen sebaris adalah penyesuaian dan ia tidak akan berfungsi jika anda menambah lebar padanya. Untuk menetapkan lebar, anda perlu menetapkan span untuk memaparkan:blok. Tetapi jika anda menambah mutlak atau terapung pada span, atribut paparan span secara automatik akan menjadi blok dan lebar boleh ditentukan. Oleh itu, jika anda melihat absolute/float dan display:block muncul pada masa yang sama dalam CSS, maka display:block ialah kod CSS berlebihan.

Penipuan tinggi

Dalam contoh di atas, mutlak ditambah pada p pada lapisan luar gambar, jadi tahap penipuan yang tinggi tidak dicerminkan dengan baik, jadi mutlak dipindahkan ke gambar dalam, kesannya keluar:

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

Jika anda telah melihat penjelasan terperinci CSS terapung, anda akan mendapati bahawa kesannya adalah sama. Tetapi prinsip di sebalik mereka sebenarnya berbeza dan tidak betul-betul sama. Anda boleh melihatnya dengan menambahkan beberapa teks:

<p   style="max-width:90%">
  <img  src="img/25/1.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>
<p style="border:4px solid red;">
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
  我是一个绝对定位的absolute元素
</p>

Jelas daripada gambar bahawa teks itu diliputi oleh gambar, yang berbeza daripada terapung. float memperdayakan elemen induk untuk berfikir bahawa ketinggiannya telah runtuh, tetapi elemen apungan itu sendiri masih dalam aliran dokumen, dan teks akan mengelilingi elemen apungan dan tidak akan dikaburkan.

Tetapi mutlak tidak lagi menipu elemen induk, tetapi mempunyai hubungan hierarki . Jika elemen induk dalam aliran dokumen biasa dianggap sebagai fana, maka mutlak telah menjadi abadi Dalam istilah hari ini, ia tidak lagi berada dalam dimensi yang sama. Dari perspektif elemen induk, imej yang ditetapkan kepada mutlak telah hilang sepenuhnya, jadi teks dipaparkan dari hujung kiri. Tahap mutlak adalah tinggi, jadi gambar meliputi teks.

Saya masih ingat apabila saya mula-mula bersentuhan dengan CSS, yang masih bajingan dengan kuasa tempur 5, saya tahu bahawa mutlak boleh mempunyai konsep hierarki, dan saya tersilap menganggap bahawa saya telah memahaminya sepenuhnya . Sekarang apabila saya memikirkannya, ia benar-benar mengelirukan (tentunya ini Ia bukan perkara yang buruk. Setiap kali anda merasakan bahawa diri anda yang lalu seperti sekeping tauhu, itu bermakna anda telah membuat kemajuan. Sebaliknya, jika anda Sentiasa fikirkan bagaimana anda ketika itu, bermakna anda masih berpuas hati.)

Setelah memiliki asas di atas, anda juga perlu memahami ciri-ciri mutlak berikut

• Cara menentukan titik sauh
• Cinta dan bunuh antara satu sama lain dengan saudara
• Hubungan dengan z-index
• Kurangkan overhed lukisan semula dan aliran semula

Cara menentukan titik anchor

Setelah mutlak berlapis, Persoalan pertama yang timbul ialah di mana untuk memberitahu pelayar untuk memaparkan elemen. Untuk elemen dalam aliran dokumen biasa, penyemak imbas boleh mengira kedudukan elemen berdasarkan saiz dan kedudukan elemen induk, anak dan adik-beradiknya. Tetapi apa yang perlu dilakukan selepas lapisan? Idea asas adalah seperti berikut:

Kes pertama: pengguna hanya menentukan mutlak untuk elemen, tetapi tidak menyatakan kiri/atas/kanan/bawah. Pada masa ini, kedudukan titik penambat sudut kiri atas unsur mutlak ialah kedudukan elemen dalam aliran dokumen biasa. Seperti dalam legenda di atas, panda gambar ialah anak pertama unsur induk, jadi titik penambat sudut kiri atas ialah sudut kiri atas kandungan unsur induk.

Jika anda menukar susunan gambar panda dan teks di bawah untuk menjadikannya anak kedua unsur induk, gambar bernilai seribu perkataan:

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

结论重复一遍：未指定left/top/right/bottom的absolute元素，其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况：用户给absolute元素指定了left/right，top/bottom

先简单点，让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的，即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时，元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

只指定right时，元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值：

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

只指定top时，元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

只指定bottom时，元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值：

 

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img    style="max-width:90%" src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
</p>

通过对left/top/right/bottom的组合设置，由于没有position:static以外的父元素，此时absolute元素可以去任意它想去的地方，天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是（好吧，我承认，这是我战5渣渣时的认识。如果你是弗利萨，可以鄙视这句话）：relative主要用于限制absolute

上面已经说了，如果absolute元素没有position:static以外的父元素，那将相对body定位，天空才是它的极限。而一旦父元素被设为relative，那absolute子元素将相对于其父元素定位，就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

通常的做法是将APP图片所处的p设成relative，然后红色圈圈设成absolute，再设top/right即可。这样无论用户怎么改变APP图片的位置，红色圈圈永远固定在右上角，例如：

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="img/25/2.jpg" / alt="Apakah kedudukan mutlak dalam css" >
  <span class="tipIcon">6</span>
</p>

这样做效果是OK的，兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式，具体选用哪个方案是见仁见智的。我比较看重的标准：一个是简洁，另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法，应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移，但父层p并不需要任何位置偏移，之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业，顺便陪客户聊聊天，但纯聊天聊完一个钟，恐怕会被投诉。

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Apakah kedudukan mutlak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!