html - 移动 CTA 按钮

Question

我的页面上有一个号召性用语按钮，我试图将其稍微向右移动，以便更好地与页面上它上方的文本/图像对齐。我尝试的所有操作要么将其移到其他元素后面，要么什么都不做。任何提示/技巧/解决方案都会很棒。下面列出了 CSS。谢谢。

        .cta-button {
    margin: 10px auto;
    clear: both;
    float: none !important;
    padding-left:30px;
    height: auto !important;
}
            .cta-on-phone-alignment { text-align: center !important; clear: both     !important; height: 70px; 0 0 0; vertical-align: baseline !important; }
             img.hero {
    clear: inherit !important;
    margin: 0 auto !important;
    text-align: center !important;
    float: none !important;
}

按钮所在的HTML。如果需要更多，请告诉我。我对 Web 设计有点陌生，其中很多内容仍然让我感到困惑。

<div class="row cta-on-phone-alignment">
                            <!-- Button links to bottom of page -->
                            <a href="#bottom" class="cta-button" style="text-align:center !important;">Contact Us</a> <!-- Call To Action Button -->
                        </div>

Answer 1

要确保按钮位于堆栈的前面，您需要使用 z-index 和定位。

尝试

.cta-button {
  margin: 10px auto;
  clear: both;
  float: none !important;
  padding-left:30px;
  height: auto !important;

  position: relative;
  z-index: 1000;
}

不过，如果您也可以发布您的 HTML，那将大有帮助!