CSS Layout How to - Put absolute positioned element inside relative parent to overlay image and text

Question

We would like to know how to put absolute positioned element inside relative parent to overlay image and text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.imgg {<!-- w ww .  j a  v a 2  s.  co  m-->
  position: relative;
}

.imgg>div {
  position: absolute;
  top: 2.5vw;
}

.imgg>img {
  max-width: 100%;
  width: auto\9;
}
</style>
</head>
<body>
  <div class="imgg">
    <img src="http://www.java2s.com/style/download.png" />
    <div id="text1">this is a test. 
    this is a test. this is a test. this is a test. this is a test.
    this is a test. this is a test.
     this is a test.</div>
  </div>
</body>
</html>

The code above is rendered as follows: