CODEWITHSUNDEEP
cssreactjs
user4546364
user4546364

Reputation:

Overlap between two element

enter image description here

I want to create this view. I am using react. Using bumbag for theming. The part I am struggling right now is to Overlap the balance card with that "+" Button. My code so far is

<Box
  padding="major-2"
  width="100vw"
  height="25vh"
  display="flex"
  flexDirection="row"
  gap="2em"
>
  <Card width="100vw" height="17vh" borderRadius="1em">
    <Box fontWeight="bold">৳ Balance</Box>
    <Box textAlign="center" fontSize="3rem" fontWeight="bold" color={balanceTextColor}>
      {balance.amount}
      {balance.hasUnverrifiedLoad ? "+" : ""}
      <sup style={{ fontWeight: "normal" }}>৳</sup>
    </Box>
    {/* <Button variant="circle">+</Button> */}
  </Card>
  <Box padding="major-1" display="flex" flexDirection="column" alignItems="center">
  <Text>You can now earn with your wifi router</Text>
  <Image src={process.env.PUBLIC_URL + "/down-arrow.png"} height="12vh" width="5vw"/>
  </Box>
</Box>

Here Box,Card,Text,Image are from Bumbag. How Can I overlap the button with the bottom right of the card?

So far I was able to do this, without overlapping.

Upvotes: 0

Views: 73

Answers (2)

nhk96
nhk96

Reputation: 120

I usually use styled-components to custom style my component. As for the answer for the question, please refer here:

https://codesandbox.io/s/sad-montalcini-0gw4j?file=/src/App.js

Please edit the css as per your requirement.

Upvotes: 0

That Guy Kev
That Guy Kev

Reputation: 396

you can add those styling to the Button styles and adjust it to fit your styling

.card-button  {
  position: absolute;
  bottom: -5px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 20px !important;
  box-sizing: content-box !important;
}

Upvotes: 0

Related Questions