Question

调整浏览器大小时，按钮不会与图像保持一致。我尝试了img div中的position:absolute，并且响应性不能与position属性配合使用。显然，float:left无法用CSS编写。

＆＃13;

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

＆＃13;

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

＆＃13;

见JSFIDDLE我做了什么。

Answer 1

您使用的是固定大小调整单元，而这不是您制作响应式网页的方式。

如果您希望按钮保持在中间位置，则必须将其完全放在相对div内。

这样的事情：

＆＃13;

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

＆＃13;

<div class="relative">

  <button class="centered">I'm in the middle</button>

</div>

＆＃13;

Answer 2

最好将图像更改为该div上的背景图像，并将按钮移动到其中。

HTML：

<section class="section6">
    <div class="img-group"><button>REQUEST AN INTERPRETER</button></div>
    <div class="bg-bar"></div>
</section>

CSS：

.section6 { 
  margin: 0 auto; 
  text-align: center; 
  margin-top: 0;  
  }

.img-group { 
  z-index: 2; 
  text-align: right; 
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  background: url('http://dignityworks.com/wp-content/uploads/2016/04/group-people-standing-copyspace-7235283.jpg') no-repeat;
  background-size: cover;
  width: 400px;
  height: 370px;
  }

div.bg-bar { 
  margin-top: -150px; 
  max-height: auto;
  height: 150px; 
  background-color: #7290ab; 
  z-index: 3; 
  }

.section6 button { 
  position: relative; 
  z-index: 5;
  top: 100px; 
  margin-right: 20px;
  }

Answer 3

试试这个：

HTML：

<section class="section6">
    <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">
         <button>REQUEST AN INTERPRETER</button>
    </div>
    <div class="bg-bar"></div>
</section>

CSS：

.section6 { 
  margin: 0 auto; 
  text-align: center; 
  margin-top: 0;
}

.img-group {
  position: relative;
}

.img-group img { 
  text-align: center; 
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid red;
}

.img-group button { 
  display: block;
  position: absolute;
  z-index: 10;
  margin-left: -75px;
  top: 50%;
  left: 50%;
  max-width: 100%;
}

div.bg-bar { 
  margin-top: -150px; 
  max-height: auto;
  height: 150px; 
  background-color: #7290ab; 
}

响应div留在嵌套div中不起作用

3 个答案: