How to stick image to div block in CSS?

Question

I'm trying to stick an image to div block in CSS. I couldn't move 'image' using margin... What can I do? Advice is appreciated. Thank you.

What I want to implement

  .bottalk { background-color: white; height: 100px; width: 200px; margin-top: 20px; margin-left: 280px; border-radius: 1.5em; } .bottalk p { padding-top: 5px; padding-left: 15px; } .bot .bottalkwhite { height: 40px; margin-left: 250px; margin-top: 0px; } .bottalk button { background-color: yellow; color: purple; padding: 5px 5px; border: none; margin-left: 50px; box-shadow: 3px 3px 2px #666666; } 

  <div class="col-6 bot"> <div class="bottalk"> <p>Ready to get started?</p> <button>Let's talk</button> </div> <img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" /> </div> </div> 

Current view

Answer 1

You can use the position: relative; and adjust the values of the top and left properties， like the follow code：

  .bottalk { position: relative; left: -5px; top: 10px; background-color: white; height: 100px; width: 200px; margin-top: 20px; margin-left: 280px; border-radius: 1.5em; } .bottalk p { padding-top: 5px; padding-left: 15px; } .bot .bottalkwhite { height: 40px; margin-left: 250px; margin-top: 0px; } .bottalk button { background-color: yellow; color: purple; padding: 5px 5px; border: none; margin-left: 50px; box-shadow: 3px 3px 2px #666666; } 

  <div class="col-6 bot"> <div class="bottalk"> <p>Ready to get started?</p> <button>Let's talk</button> </div> <img src="./img/bottalk.png" alt="bottalk" class="bottalkwhite" /> </div> </div> 

Answer 2

In order to put a image into a exact position relative to its ancestor, you can set position property to absolute then using left-right-top-bottom properties, you can determine its exact position. like this:

.bottalkwhite{
    position: absolute;
    left: 250px;
    top: 0px;
    }

though in such a particular css rule definition using id selector instead of class selector sounds more appropriate.

Answer 3

Please ignore the background color: I snipped it from the second image!

I have moved the position of the image inside the div with class bottalk , then I absolutely positioned the image, then all you need to do is to set the top and left position based on the image, ( Cropped the image online so please ignore the quality of the output ), So now you can position this anywhere. Also I have added background-color:pink to the body to show the image, please ignore this too.

So to summarize. I set the parent div element with class bottalk as position:relative and the child image with class bottalkwhite to position:absolute so that it can be positioned inside the parent. Position absolute will take the position relative to the immediate parent with position:relative , I hope I made my summary clear.

 body{ background-color:pink; } .bottalk { position: relative; background-color: white; height: 100px; width: 200px; margin-top: 20px; margin-left: 280px; border-radius: 1.5em; } .bottalk p { padding-top: 5px; padding-left: 15px; } .bot .bottalkwhite { height: 40px; position: absolute; top: 80%; left: -30px; } .bottalk button { background-color: yellow; color: purple; padding: 5px 5px; border: none; margin-left: 50px; box-shadow: 3px 3px 2px #666666; } 

 <div class="col-6 bot"> <div class="bottalk"> <p>Ready to get started?</p> <button>Let's talk</button> <img src="https://i.stack.imgur.com/7i9bY.gif" alt="bottalk" class="bottalkwhite" /> </div> </div> </div> 

Answer 4

Use position:relative on the wrapper element of the image and position the image via position: absolute , left: 0 and bottom: 0 in the bottom-left corner. Then adjust it's position via transform: translate , to get the desired effect.

Note: I moved the image into the div.botttalk container to position it relative to its parent.

Like this:

 body { background: #715886; font-family: Open Sans, Arial, sans-serif; } .bottalk { background-color: white; width: 200px; margin-top: 20px; margin-left: 100px; border-radius: 8px; padding: 24px 16px; position: relative; text-align: center; color: #715886; } .bottalk .bottalkwhite { position: absolute; left: 0; bottom: 0; height: 40px; color: white; transform: translate(-100%, 100%) translate(16px, -16px); } .bottalk h4 { line-height: 1; margin: 0 0 24px 0; } .bottalk button { cursor: pointer; color: #715886; display: inline-block; background-color: #fbcb33; font-weight: bold; padding: 0 32px; border: none; line-height: 40px; font-size: 14px; box-shadow: 0px 1px 2px #666666; } 

 <div class="col-6 bot"> <div class="bottalk"> <h4>Ready to get started?</h4> <button>Let's talk</button> <img src="https://i.imgur.com/oeUdlld.png" alt="bottalk" class="bottalkwhite" /> </div> </div>