Positioning and overlaying image on another image

前端 未结 4 706
挽巷
挽巷 2020-12-24 12:35

See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?

\"enter

相关标签:
4条回答
  • 2020-12-24 13:06

    Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

    Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

    0 讨论(0)
  • 2020-12-24 13:06

    Here you go. This is done using 2 images.

    <div class="parent">
        <img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
        <div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
    </div>
    
    .parent{
        width:200px;
        height:200px;
        position:absolute;
        z-index:0;
    }
    
    .inner{
        position:absolute;
        z-index:1;
        bottom:0;
        right:0;
    }
    

    Check working example at http://jsfiddle.net/WPWzq/

    0 讨论(0)
  • 2020-12-24 13:26

    You can use css to solve the problem.

    div {
      position: relative;
      display: inline;
    }
    .imtip {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    <div>
      <img src="http://i.stack.imgur.com/Blaly.png" />
      <img src="http://www.w3schools.com/favicon.ico" class="imtip" />
    </div>

    Basically, I've done more or less what ZDYN said, just that you need to include a display: inline in the container otherwise the container div spans the whole width.

    0 讨论(0)
  • 2020-12-24 13:26

    See my answer to this question.

    The difference with your situation is that you don´t need any javascript if you don´t want to, you can just add divs to the html and position them absolutely on top of the photos.

    I think I would personally add the divs using javascript anyway so that they don´t clutter the html.

    0 讨论(0)
提交回复
热议问题