CSS - anchor point move display:flex dan position:absolute

Question

Saya mempunyai elemen Flex dan tiga elemen kanak-kanak. Anak kedua harus bertindih dengan anak pertama menggunakan kedudukan mutlak seperti ini:

Dijangka:

Perhatikan bahawa anak kedua harus di atas anak pertama, bukan di sebelahnya.

Walau bagaimanapun, tetapan display: flex pada induk nampaknya menggerakkan titik penambat atau titik rujukan unsur mutlak ke permulaan div. Hasil sebenar adalah ini:

Hasil sebenar:

Meletakkan elemen anak kedua di dalam elemen pertama atau ketiga bukanlah pilihan kerana ia mempunyai overflow:scroll. Perkara yang sama berlaku untuk menggunakan mana-mana atribut display yang lain pada induk, kerana reka letak saya bergantung pada overflow:scroll。在父级上使用任何其他 display 属性也是如此，因为我的布局依赖于 display: flex. Saya tahu penyelesaian ini telah dicadangkan dalam siaran lain, namun, saya tidak menemui soalan/jawapan yang menangani batasan ini.

Menggunakan sesuatu selain display:absolute pada anak kedua juga berfungsi, seperti margin negatif, tetapi saya juga tidak boleh menggunakannya.

Sekiranya sesiapa tahu sama ada ini boleh dilakukan atau mempunyai sebarang cadangan, ia amat dihargai.

Untuk melihatnya dalam tindakan, berikut ialah kod saya, dipermudahkan untuk menunjukkan masalah:

body{
  color: white;
}
.wrapper{
  display: flex;
}
.wrapper .a{
  background-color: blue;
  flex-grow: 1;
}
.wrapper .b{
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
}
.wrapper .c{
  background-color: green;
  min-width: 40px;
}

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

Answer 1

Tambahkan position:relative; kepada ibu bapa

Apabila elemen diberikan atribut position:absolute; 属性时，它将通过 relative、absolute 或 fixed 定位来针对最近的父元素进行定位。如果没有找到，它将针对 body 进行定位。在这种情况下，您可能需要将 position:relative; 添加到 .wrapper, ia akan diletakkan pada elemen induk terdekat melalui kedudukan relative, absolute atau fixed. Jika tidak ditemui, ia akan menyasarkan body. Dalam kes ini, anda mungkin mahu menambah

pada elemen .wrapper kerana ia adalah titik rujukan untuk kedudukan mutlak.

Tambahkan nilai kedudukan pada elemen

position:absolute;Mengikut takrifan, elemen akan diposisikan sepenuhnya

menggunakan set nilai tertentu. Iaitu, sejauh mana dari bahagian atas, kanan, bawah atau/dan tepi kiri. Apabila anda tidak memberikan apa-apa nilai, ia hanya melekat pada penjuru kiri sebelah atas, iaitu apa yang berlaku di sini.

Perlu menetapkan nilai kedudukan

position:absolute; 从正常内容流中获取一个元素。也就是说，它周围的元素不会影响它的大小或位置；因此绝对位置。为了实现图中所示的效果，您需要指定 .c 元素的宽度，并使用相同的精确值从右边缘定位 .b

Dapatkan elemen daripada aliran kandungan biasa. Iaitu, unsur-unsur di sekelilingnya tidak menjejaskan saiz atau kedudukannya; Untuk mencapai kesan yang ditunjukkan dalam imej, anda perlu menentukan lebar elemen .c dan meletakkan elemen .b dari tepi kanan menggunakan nilai tepat yang sama.

Sila lihat coretan kod di bawah untuk rujukan.

body{
  color: white;
  --width: 80px;
}
.wrapper{
  display: flex;
  position: relative;
}
.wrapper .a{
  background-color: blue;
  flex-grow: 1;
}
.wrapper .b{
  position: absolute;
  right: var(--width);
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
}
.wrapper .c{
  background-color: green;
  width: var(--width);
}

  
A
  
B
  
C

🎜

Answer 2

Ia kelihatan di sebelah kiri div kerana ia telah dikeluarkan daripada aliran dokumen. Malah, ia sebenarnya diposisikan relatif kepada port pandangan dan bukannya pembalut induk. Untuk menyasarkannya kepada pembungkus, tetapkan position:relative kepada kelas pembungkus untuk mencipta blok mengandungi baharu

Untuk memastikan ia bertindih dengan hujung div 'a', saya menggunakan atribut 'kanan' untuk mengalihkan tepi kanan ke kiri dengan nilai yang saya tetapkan Atribut tersuai, yang saya tetapkan kepada atribut itu dan div 'c '. Lihat contoh beranotasi di bawah.

.wrapper {
  position: relative;
  display: flex;
  color: white;
  --element-c-width: 40px; /* set this to both set the width of div 'c' and how far we move div 'b' leftwards */
}

.a {
  background-color: blue;
  flex-grow: 1;
}

.b {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
  right: var(--element-c-width); /* from the right hand side of the wrapper div, move it leftwards by this value */
}

.c {
  background-color: green;
  min-width: var(--element-c-width);
}

  
A
  
B
  
C