Button won't move with block level text in div - html

Question

I'm trying to make it so that the button will move with the text as I resize the window. I can't figure out why it won't work even though it's got the same properties as the other id's/classes.
Check here for JSFiddle
.relative{
position:relative;
width:100%;
}
.absolute-text {
color: white;
position:absolute;
bottom:0;
top: 115px;
width:100%;
text-align:center;
font-family: 'Raleway', sans-serif;
}
#fontStyle {
font-weight: 700;
font-size: 48px;
}
#fontStyle2 {
font-size: 25px;
text-decoration: none;
font-weight: 500;
top: 210px;
}
#button {
width: 200px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
top: 335px;
left: 825px;
text-align: center;
}
<header>
<div class="relative">
<img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" />
<p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
<p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
<a class="absolute-text" id="button" href="">Order Web Hosting</a>
</div>
</header>

Answer 1

You can use % for responsive
<div class="relative">
<img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" width="100%" />
<p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
<p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
<p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>
</div>
<style>
.relative{
position:relative;
width:100%;
}
.absolute-text {
color: white;
position:absolute;
bottom:0;
top: 4%;
width:100%;
text-align:center;
font-family: 'Raleway', sans-serif;
}
#fontStyle {
font-weight: 700;
font-size: 48px;
}
#fontStyle2 {
font-size: 25px;
text-decoration: none;
font-weight: 500;
top: 30%;
}
.button_center{
text-align:center;
}
#button {
width: 200px;
margin-left: -130px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
top: 60%;
text-align: center;
}
</style>
best variant - you can put the image in <div style="background:url() > and not use 'absolute'
===================try it
<p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>
.button_center{
text-align:center;
position: absolute;
left: 50%;
top: 60%;
}
#button {
width: 200px;
height: 46px;
line-height: 46px;
padding: 0px 24px;
display: inline-block;
background-color: #1a75ff;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-transform: uppercase;
-webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
left:40%;
text-align: center;
position: relative;
left: -50%;
}