我正在尝试使它在调整窗口大小时随文本一起移动。我不知道为什么它即使与其他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;
}
#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>

最佳答案

您可以使用%进行响应

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

10-05 20:58
查看更多