htmlcsssass

How can I create a sticker stick on div

I am trying to create a sticker that stick on top of a div like this:

enter image description here

<div className="upgrade-premium">
<div className="upgrade-team">
    <h1>Premium</h1>
    <p>100 members</p>
    <p>Private Teams</p>
</div>
<div className="team-plan-premium">
    <span className="numb-passes">
    <Passes20 />
    </span>
    <span className="passes"> Passes</span>
</div>
</div>

How can I create it with css that make it stick on a div like that?

Solution

  • You must set the position property of your outer element (.upgrade-premium) to relative first.

    And then, set the position property of your sticker element to absolute, and set its right and top properties to 0, somehow like this:

    .upgrade-premium {
    position: relative;
}

.sticker {
    position: absolute;
    right: 0;
    top: 0;
}