Place image on top of element with css - html

Question

How do I place an image on top of a button with html and css?
<div>
<img src="photo.jpg">
<button>Text</button>
</div>
I guess it should be something like
div {
position: relative;
}
img {
position: absolute;
top: 10px;
}
but it acts a bit weird.
Is it possible to just have a normal div and then set the img to float on top of everything else in the div element?

Answer 1

I don't know what's your purpose exactly, if you want the image to take the whole line, make the button lay beneath, why don't set the CSS display attribute of the image to display:block;?

Answer 2

hello see the below one its simple with a few line code
<div style="position:relative;" >
<img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100" >
<input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" >
</div>

Answer 3

You can use position: absolute with transform: translate() on img.
This calc(-100% - 1px) means
-100% or - height of element (img in this case) that you are performing transform on, so it will translate for its own height up on Y axis
-1px is for top border on div element.
div {
position: relative;
display: inline-block;
border: 1px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 1px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
Just to demonstrate if you have border of 5px then you should use -5px in calc.
div {
position: relative;
display: inline-block;
border: 5px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 5px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>

Answer 4

#bottom{
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#bottom .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
<div id="bottom">
<div class="content">
<img src="http://placehold.it/182x121"/>
<button>Text</button>
</div>
</div>

Answer 5

May be you are trying to achieve something like this.
.userIcon {
background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
height:20px;
width:20px;
background-size:20px;
top: 8px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear{
clear:both;
}
.button{
padding:10px;
color: #FFF;
background-color: #0095ff;
border:1px solid #07c;
box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
margin:2px 0px 0px 10px;
}
<div>
<button class="button">
<span class="left userIcon"></span>
<span class="right btnText">Create user account</span>
<span class="clear"></span>
</button>
</div>

Answer 6

If you just want to make the image to come over the button, you can make the display as block
check the following snippet
div img{
display:block;
}
button{
text-align:center;
margin:40px;
padding:10px;
}
<div>
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
<button>Text</button>
</div>
Hope this helps