Saya ingin menerapkan tombol tindakan mengambang dan saya ingin melapisinya pada bagian lain dari suatu komponen tetapi bagaimanapun itu berada di bawah komponen lain, bahkan ketika saya mencoba untuk mengimplementasikannya di komponen induk.

Saya ingin mengimplementasikannya dari UI material Tombol tindakan mengambang

Inilah yang saya coba sebelumnya:

const fabstyle = {
        margin: 0,
        top: 'auto',
        right: 20,
        bottom: 20,
        color:'green',
        left: 'auto',
        position: 'fixed',
};
return (
    <div >
        <Fab style={fabstyle}></Fab>
    </div>
)
0
louis Schneider 10 Januari 2021, 00:18

3 jawaban

Jawaban Terbaik

Ada beberapa cara untuk mencapai ini adalah dengan grid, yang lain yang lebih sederhana adalah membuat komponen induk Anda relatif (posisi: relatif) dan komponen anak-anak absolut (posisi: absolut).

Kemudian Anda dapat memposisikan elemen anak dengan nilai: *atas, kiri, bawah dan kanan

.parent {
    position: relative;
}

.children {
   position: absolute;
   top: 0;
   left: 0;
}

Dalam contoh di atas, anak-anak akan dirender di sudut kiri atas komponen induk

1
GBra 4.669 9 Januari 2021, 21:23

Jadikan komponen induk Anda Posisi Relatif & komponen anak Posisi Absolut. Ini akan memungkinkan Anda untuk memposisikan elemen anak Anda seperti yang Anda inginkan.

#Parent {
position: relative;
}

#Child {
position: absolute;
//Set the top,left,bottom & right properties the way you want to style your component
}
1
Ghazi 360 10 Januari 2021, 13:41

Anda dapat menggunakan properti z-index di kelas CSS

Pemakaian:

.myBoxOnTop {
    z-index: 3;
}

.myBoxOnBottom {
    z-index: 2;
}

1
Dharman 10 Januari 2021, 20:09