<div class="container">
  <img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=efe01df2ebde79714be88d560479c9c7&auto=format&fit=crop&w=1650&q=80" alt="Lake and mountain">
  <h1>Position me here</h1>
  <p>I'm a <strong>p</strong> tag. I'm not at all affected by the huge headline in the picture. Even if it moved around, I'd stand my ground.</p>
  <p>"Position me here" is placed using the top and right borders of this white container, it will only care if those get changed.</p>
  <p class="photocredit">Photo by ivan Torres on <a href="https://unsplash.com/photos/MQUqbmszGGM">Unsplash</a></p>
</div>
.container {
  background-color: #fffffe;
  width: 500px;
  margin: 50px auto;
  padding: 10px;
  position: relative;
}

h1 {
  font-size: 50px;
  color: white;
  margin: 0;
  position: absolute;
  top: 160px;
  right: 30px;

}

img {
  width: 100%;
}

body {
  font-family: roboto, sans-serif;
  background-color: #232323;
}

p {
  font-size: 18px;
  padding: 0 10px;
  text-align: justify;
}

.photocredit {
  font-size: 10px;
  text-align: right;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.