How to move an Div to the bottom right side of an Image-CodePudding

So I have an Image card that I want to place an element to the bottom right of the image.

I'm using the TailwindCss aspect ratio plugin.

That Close X needs to be moved to the bottom-right side of the Image.

<div >
      <div >
        <image
          src="http://unsplash.it/500/500?random&gravity=center"
          alt="Profile Image"
          
          layout="fill"
        />
        <div >X</div>
      </div>
    </div>

This is a Codesandbox demonstrating the problem

CodePudding user response：

You just need to add a relative class to the div with the aspect ration styles.

<div >
  <div >
    <image src="https://unsplash.it/500/500?random&gravity=center" alt="Profile Image"  layout="fill" />
    <div >X</div>
  </div>
</div>

https://play.tailwindcss.com/7yFSnphcyq

CodePudding user response：

Since the TailwindCss aspect ratio plugin uses padding and 0 height, position absolute will not work as intended. So we can use flex to our advantage.

<div >
  <div >
    <image
      src="http://unsplash.it/500/500?random&gravity=center"
      alt="Profile Image"
      
      layout="fill"
    />
    <div >X</div>
  </div>
</div>

Working Solution: https://codesandbox.io/s/morning-morning-ggr841?file=/public/index.html

CodePudding user response：

you just need add relative class in div parent of image and add w-full class in image element, because width of image will be fit with width of div parent.

    <div >
       <div >
         <image
          src="http://unsplash.it/500/500?random&gravity=center"
          alt="Profile Image"
          
          layout="fill"
         />
         <div >X</div>
      </div>
    </div>