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>
Tambahkan
position:relative;
kepada ibu bapaApabila elemen diberikan atribut
pada elemenposition:absolute;
属性时,它将通过relative
、absolute
或fixed
定位来针对最近的父元素进行定位。如果没有找到,它将针对body
进行定位。在这种情况下,您可能需要将position:relative;
添加到.wrapper
, ia akan diletakkan pada elemen induk terdekat melalui kedudukanrelative
,absolute
ataufixed
. Jika tidak ditemui, ia akan menyasarkanbody
. Dalam kes ini, anda mungkin mahu menambah.wrapper
kerana ia adalah titik rujukan untuk kedudukan mutlak.position:absolute;
Mengikut takrifan, elemen akan diposisikan sepenuhnyaposition:absolute;
从正常内容流中获取一个元素。也就是说,它周围的元素不会影响它的大小或位置;因此绝对位置。为了实现图中所示的效果,您需要指定.c
元素的宽度,并使用相同的精确值从右边缘定位.b
.c
dan meletakkan elemen.b
dari tepi kanan menggunakan nilai tepat yang sama.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 baharuUntuk 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.