I am currently on a project of cloning canva using React and TailwindCSS. Say I have a structure like below:
<div className='relative'><div><div>This is for the floating menu</div><div className='absolute'>This is the element that the floating menu follows</div></div></div>The outer relative div is the page, in the page contains elements (shapes, textboxes) that is draggable.My intention is making the floating menu position follows and be fixed above the element (just like the menu in canva where you can copy or delete the element).
So far, the position of the floating menu just stuck at one place in spite of being grouped with the element div. I suspect that it is because the element div is set position absolute.I did tried make the container flex, direction column like so:
<div className='relative'><div className='flex flex-col' gap-2><div>This is for the floating menu</div><div className='absolute'>This is the element that the floating menu follows</div></div></div>But it doesnt work.I did think of making the floating menu absolute then position it with top and left based on the element's position but that's not ideal, not to mention when the size of the element changes, the floating menu position wont update properly.I wonder if there are any other approach? Thanks