图像顶部的按钮（但它不会保持不变）

Question

编辑我的原始帖子---

我有一个图像，其中包含作为图像的文本，图像上的一个按钮不会停留在响应式滚动中。

所以我只放了图像，将文本设置为 div。我已将图像设置为相对，将文本设置为绝对。 ？？？现在我无法在我的巨型图像上获得我的文本 div，我对此感到非常厌烦。 （我还需要文本背后的透明度，但也放弃了定位。）

HTML

<div class="w3-jumboimagecontainer> 
<div class="w3-display-container w3-jumboimage w3-center">
<img src="images/assistingelder.jpg" style="width:100%"></div>
<h5 class="ontop">
<h5 class="jumbonow">Now hiring</h5> <h5       
class="caregiversnow">Caregivers</h5> 
<h5 class="birminghamnow">in the Birmingham area</h5></h5>
<div class="w3-jumbotextsquare"">
<div class="w3-jumbobutton w3-button w3-xlarge w3-center">
<a href="caregiversapp.html" class="w3-button w3-xlarge">apply now! 
</a></div></div></div></div>

CSS

.w3-jumboimagecontainer {width: 100%;}
.w3-jumboimage {position: relative;}
h5.ontop {position: absolute;}
.w3-jumbobutton .w3-button {
background-color: #d7d78f;
border-color: #d7d78f;
color: #FFF; 
border-radius: 8px;
text-transform: uppercase;
letter-spacing: 1px;
object-position: center;
}
h5.jumbonow {font-family: "proxima-nova"; helvetica; arial; sans-   
serif;
font-weight: 200;
font-style: normal;
font-size: 50pt;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
text-align: center;
top:0px;}
h5.caregiversnow {
font-family: georgia; serif;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
font-size: 60pt;
letter-spacing: 2px;
color: white;
text-align: center;
margin-top:px;}
h5.birminghamnow {font-family: "proxima-nova"; helvetica; arial;   
sans-serif;
font-weight: 100;
font-style: normal;
font-size: 30pt;
letter-spacing: 2px;
color: white;
text-align: center;
margin-top:px;}

Answer 1

它飞走的原因是left:630px; 是绝对的。这意味着当屏幕变小时，630px 将不再居中。

要解决这个问题，请使用相对单位。有很多方法可以在 css 中居中，howtocenterincss.com 可以很好地为您提供所需的 css。

或者left: 50%; transform: translate(-50%, 0); 应该可以工作。

请注意，bottom 也是如此，但在这里它可能不是问题。

---

但是，由于您的图像上也有文字，因此在确定按钮位置时最好考虑到这一点。

基本上都在文本和按钮周围制作一个包装器，并将该包装器对齐在图像的中间。然后按照您想要的方式布置它们。