Thomas Hutton Thomas Hutton - 1 year ago 85
CSS Question

Can't Put Image Over Image

Edit: The solutions HAVE to have display: inline-block;

I'm trying to put an image over another image. However, no matter what I set the margin-right to, it stays in the same spot. About 1/5 of the background image.

Here's my code:

.backgroundimage {
display: inline-block;
position: relative;
top: 70px;
bottom: 46px;
.Youtube {
position: absolute;
left: 280px;
bottom: 46px;
right: 380px;

<div class="backgroundimage">
<img src="" alt="null" />
<iframe class="Youtube" width="479" height="269" src="" frameborder="0" allowfullscreen></iframe>

And a picture of my issue:

enter image description here

Answer Source

Just change left to a smaller value in the .Youtube rule (that's left of the parent elements left side). Start at about 10px and find the ideal position by trying.

ADDITION: You also have to erase the right: 380px; from your .Youtube rule - it overwrites the left rule (since it follows below it ("cascading")).