CODEWITHSUNDEEP
htmlcss
billy23lones
billy23lones

Reputation: 25

Position Image over top line of div

Here's an example of what I'm trying to accomplish: http://prntscr.com/8idhoz

As you can see, I'm trying to get an image over the top line of the div - I've managed to achieve this by using position: absolute, but is there another way?

Here's my code:

<div class="box">
<br>
<img src="image.png" style="position: absolute; top: 185px; left: 690px;" />
<h2>Heading</h2>

.box {
 box-shadow: 0px 3px 12px 2px #000; 
}

Upvotes: 1

Views: 59

Answers (1)

FalcoB
FalcoB

Reputation: 1333

that should work :)

.box {
 margin-top:100px;
 box-shadow: 0px 3px 12px 2px #000; 
}
img{
    width: 50px;
    margin-left: auto;
    margin-top: -50px;
    margin-right: auto;
    display: block;
}
<div class="box">
<br>
<img src="https://www.gravatar.com/avatar/f0267fed40b9c4ea8dba326e22562fa8?s=32&d=identicon&r=PG&f=1" />
<h2>Heading</h2>
</div>

Upvotes: 1

Related Questions