Css 当英雄图像包含文本时,定位响应英雄按钮

Css 当英雄图像包含文本时,定位响应英雄按钮,css,positioning,Css,Positioning,我习惯于创建一个英雄图像作为背景图像,并在顶部覆盖一个英雄按钮作为相对/在线组件 今天,我得到了一个英雄形象,上面有文字,见下文。“英雄”按钮应该位于“查看开放注册概述”的文本下方。。。。但是,有两件事正在发生: 1.当我像往常一样定位按钮时,当我缩小屏幕长度时,按钮不会停留在文本下方。 2.按钮不会位于英雄图像的顶部,而是位于图像底部下方,不会位于顶部 将文本烘焙到图像中不是最佳做法。最好是用html构建文本部分。这将允许它们彼此相对定位。由于图像具有响应性,您不能使用硬编码的像素值来定位按钮

我习惯于创建一个英雄图像作为背景图像,并在顶部覆盖一个英雄按钮作为相对/在线组件

今天,我得到了一个英雄形象,上面有文字,见下文。“英雄”按钮应该位于“查看开放注册概述”的文本下方。。。。但是,有两件事正在发生: 1.当我像往常一样定位按钮时,当我缩小屏幕长度时,按钮不会停留在文本下方。 2.按钮不会位于英雄图像的顶部,而是位于图像底部下方,不会位于顶部


将文本烘焙到图像中不是最佳做法。最好是用html构建文本部分。这将允许它们彼此相对定位。

由于图像具有响应性,您不能使用硬编码的像素值来定位按钮…请使用百分比值。@Paulie_D所以,请使用顶部:50%,左侧:75%之类的值?事实上…或者任何最适合您的值。是的,我知道这不是最佳做法。但这是设计师和项目业主一致同意的。所以,我试着适应它。可以将按钮完全放在底部,但是当按钮开始重叠时,你必须添加断点来调整它的位置。
<!-- Hero Image-->
  <div id="banner" class="row">
     <div class="col-xs-12">
        <img src="../img/headers/bannerHome_OpenEnrollment.png" class="img-responsive" alt="open enrollment" tabindex="0">
<!-- Hero Button -->
        <div class="hero-text">
              <button class="btn btn-secondary hero-text">Learn More <img src="../img/icons/btnArrow_white.png"></button>
        </div>
      </div>
  </div>
#banner .col-xs-12 {
    padding-left: 0;
    padding-right: 0;
    background-color: #49c8f4;
    position: relative;
}
.img-responsive {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.hero-text button {
  border: none;
  position: absolute;
  margin-left: 150px;
  margin-bottom: 150px;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #003057;
  font-size: 24px;
  font-family: "Klinic Slab Medium";
  cursor:pointer;
}