Unable to put image on top of image

Edit: decisions must have display: inline-block;

I am trying to set an iframe over an image. However, no matter what I set margin-right to, it stays in the same place. About 1/5 of the background image.

HTML

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>

CSS

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

And a photo of my problem:

issue

+4
source share
8 answers

Just change leftto a lower value in the rule .Youtube(to the left of the parent elements on the left). Start at about 10px and find the perfect position by trying.

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

+5

. paddings.

.backgroundimage {
  position: relative;
}
.Youtube {
  position: absolute;
  top: 11px;
  left: 11px;
}
<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
</div>
Hide result
0
<style type="text/css"> 
.container { position:relative; }
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; } 
.imgB1 { position:absolute; top: 70px; left: 100px; z-index: 3; } 
</style>

<div class="container">
<img class="imgA1" src="image1.png">
<img class="imgB1" src="image2.png">
</div>

, .

0

, , iframe:

img {
    position:absolute;
  left: 280px;
}

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

<div class="backgroundimage">
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
</div>

, , position:absolute

0

left right, . .

.backgroundimage {
    display: inline-block;
    position: relative;
    top: 70px;
    bottom: 46px;
}
.Youtube {
    position: absolute; 
    top: 22px;
    left: 20px;
}
0

.

http://codepen.io/anon/pen/BLOdov

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

HTML

<div class="backgroundimage">
 <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  </div>

CSS

  .backgroundimage {
      display: inline-block;
      position: relative;
      top: 70px;
      bottom: 46px;
    }
    .Youtube {
      position: absolute;
      left: 10px;
      bottom: 52px;
    }

Fiddel

https://jsfiddle.net/dhavalpatel/a2bhnw92/

0

..

? .

To add the width ..add max-width:500pxto the photo div or whatever size you want, it will resize perfectly.

#container {
  display: inline-block;
  width: 100%;
  height: auto;
}

#photo {
  position: absolute;
  width: 100%;
}

#movie {
position: absolute;
    width: 100%;
    max-width: 90%;
    height: 75%;
    top: 6.75%;
    left: 4.25%;
    border: none;
}
<div id="container">
  <div id="photo">
    <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" width="100%" height="auto">
    <div id="movie">
       <iframe class="Youtube" width="100%" height="100%" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen>    </iframe>
    </div>
  </div>
</div>
Run codeHide result

Jsfiddle demo

0
source

Source: https://habr.com/ru/post/1657142/


All Articles