How to stick image to div block in CSS? - html

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

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 2

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 3

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 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>