I want this <p> tag to come bottom of the image?

Question

I am totally new to this html/css I am trying to do float a text with background as image .Yes I did that but the problem is the text is floating on top of the image.If use margin-top to adjust the image,it just simple pull down the whole div.Here down i gave a pictorial representation of what I want.

html

<div class="maincon">
    <div class="picon" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('img/apple.jpg') "><p>Hi</p> 
    </div>
</div>

Css

.maincon {
    margin-top: 95px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.picon {
    width: 100%;
    height: 80%;
    background: none center/cover #f2f2f2;
}

.picon p {

}

Answer 1

You can use position: absolute

.element {
  height: 100vh;
  background:linear-gradient(to bottom, rgba(0, 0, 0, .02), rgba(0, 0, 0, .8)), url('http://cdn2.macworld.co.uk/cmsdata/features/3598128/iphone_6s_review_20.jpg');
  background-size: cover;
  position: relative;
}

p {
  position: absolute;
  color: white;
  font-size: 25px;
  margin: 10px;
  bottom: 0;
}

<div class="element">
  <p>Apple iphone</p>
</div>