当我调整浏览器的大小时，该按钮将不会与图像保持一致。我position:absolute在img div中尝试了，但响应式在position属性上效果不佳。显然float:left，CSS也不起作用。
.section6 {
margin: 0 auto;
text-align: center;
margin-top: 0;
}
.img-group img {
z-index: 2;
text-align: center;
margin: 0 auto;
border: 1px solid red;
}
div.bg-bar {
margin-top: -150px;
max-height: auto;
height: 150px;
background-color: #7290ab;
z-index: 3;
}
.section6 button {
float: left;
position: relative;
z-index: 1;
margin-top: 200px;
margin-left: 330px;
top: 40px;
}<section class="section6">
<button>REQUEST AN INTERPRETER</button>
<div class="img-group"><img src="http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg" alt="World-class SVRS interpreters"></div>
<div class="bg-bar"></div>
</section>在JSFIDDLE上查看我做了什么。
您正在使用固定的大小调整单位，而这并不是您制作响应式页面的方式。
如果您希望按钮停留在中间，则必须将其绝对定位在相对div内。
像这样：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.relative {
position: relative;
padding: 10px;
background: #0fc0fc;
animation: reduce 2s ease-in-out infinite;
height: 50px;
}
button.centered {
position: absolute;
left: 50%;
/* Kind of makes the anchor point of the element to be in the horizontal center */
transform: translateX(-50%);
}
@keyframes reduce {
0%,
100% {
width: 100%;
}
50% {
width: 50%;
}
}<div class="relative">
<button class="centered">I'm in the middle</button>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句