Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
342 views
in Technique[技术] by (71.8m points)

css - HTML Position image on top of another

I'm looking to position an image on top of another image about 10 pixels from the bottom of the image. The issue is that if I follow methods like below when the web browser is scaled the top image moves all over the place. The bottom image is relative and the top image is absolutely positioned if anyone doesn't want to open the link.

CSS-Tricks text-blocks-over-image

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Though your fiddle seems to be using the same image twice, I think I've made the adjustments you need to get your answer. You had the the same styling applied to both images inside of the image-container... adding a couple classes resolved this (or you could use psuedo-selectors).

In the future, I'd recommend putting the code for your question directly into the question as it will help the community help you. If you can, maybe go back and put your original code into this question, it will help those who stumble on this question/answer in the future.

HTML:

<div>
  <div class="image-container">
    <img class="firstimg" src="http://lorempixel.com/1000/500">
    <a class="social-image" href="https://www.instagram.com">
          <img class="secondimg" src="http://lorempixel.com/1000/500">
        </a>
  </div>
</div>

CSS:

.image-container {
    position: relative;
}

.image-container .firstimg {
    width: 100%;
}

.social-image img {
    position: absolute;
    /* left: 3em; */
    top: 70px;
    width: 100%;
    z-index:9999;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...