#Make an image sticky on a div

1 messages · Page 1 of 1 (latest)

fringe raven
#

Thanks for your question :clap:, if someone gives you an answer it would be great if you thanked them with a :white_check_mark: in response. This response will earn you both points for special roles on this server.

You can also use /ai to get help from the bot ·
ocean zephyr
#

use /ai

fringe raven
#

@keen warren lukasger.'s Question:

Here i have a Wrapper: css .wrapper { width: 380px; height: 85%; background: #2b2d2e; border-radius: 15px; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1); position: relative; overflow-y: auto; } i want to make the image sticky at the upper right corner. My problem is if i set the image to position absolute the image is fixed on the page i want if i zoom out or in that the image moves with the div: css #hat { margin: 0 auto; width: 10%; height: auto; object-fit: cover; z-index: 4; position: absolute; top: 2%; right: 36%; transform: rotate(20deg); }

To make the image sticky at the upper right corner of the wrapper, you can use a combination of relative and absolute positioning.

First, make sure that the wrapper container has a position of relative. Then, set the image position to absolute and give it a percentage value for top and right properties. Here's the modified CSS code:

.wrapper {
    position: relative;
    /* existing styles */
}

#hat {
    width: 10%;
    height: auto;
    object-fit: cover;
    z-index: 4;
    position: absolute;
    top: 2%;
    right: 2%;
    transform: rotate(20deg);
}

With this code, the image will stay sticky at the upper right corner of the wrapper, and it will move along with the wrapper when you zoom in or out. The right property is set to 2%, you can adjust this value to fine-tune the position of the image.