按钮不会随着区块级别文本移动div

Question

我正在尝试使按钮在调整窗口大小时随文本一起移动。我无法弄清楚它为什么不起作用，即使它具有与其他ID /类相同的属性。

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; 
 
} \t 
 
#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

您可以使用％的响应

<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> 

最好的变种 - 你可以把图像中<div style="background:url() >而不是用 '绝对'

===================尝试

<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%; 
    }