How to put img on bottom right corner in div?

Question

I'm trying to put a small icon on the bottom right corner and I need it to be responsive depending on whether it's a pc or or mobile.

    <style>
        .tdlr{
            background-image: url('img/TLDRback.png');
            border-radius: 15px;
            padding-top: 150px;
            margin-top: 100px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 450px;
        }

        .btmRght {
            height: 70px;
            width: 70px;
            position: absolute;
            right: -10px;
            bottom: 0;
        }
    </style>

    <section class="container-fluid text-center ">
        <div class="tdlr"> <img class="btmRght" src="img/TLDRbottomright.jpg" alt="">
        </div>
    </section>

One method you may want to consider: https://stackoverflow.com/q/35871294/3597276 — Michael Benjamin, Aug 22 '21 at 13:12

score 1 · Answer 1 · edited Aug 22 '21 at 13:32

1

Add position: relative; to .tldr.

position: absolute; positions an element relative to its nearest parent with position: relative;. When there is no such parent, it's positioned relative to the entire document.

Codesandbox here

edited Aug 22 '21 at 13:32

RABI

692
2
15

answered Aug 22 '21 at 13:23

Steve

8,066
11
70
112

yes (to Distortum) but in some cases you may also need to add `z-index:+9` to `.btmRight` or `z-index:+[#]`... if you want to make sure the img appears above other content... not needed in your example because the img is the only thing in the container using a background-image – aequalsb Aug 22 '21 at 13:32

How to put img on bottom right corner in div?

1 Answers1