Question

我试图向上移动我的后退按钮，但是无论我做什么，它都行不通。

例如

如果我执行margin-bottom: 29%;，则Button One和Button Two会向下移动，而back按钮会保持按下状态并且不会移动。
如果我执行margin-top: 29%;，则Button One和Button Two随back按钮一起向下移动。
如果我执行top: 29%，则back按钮将保持不变并且不会移动。

我该如何使我的back按钮向上移动？

（如果您需要更多代码或需要我清除某些内容，请告诉我）

.BackButton {
    border: 5px solid #401818;
    background: #a265d4;
    background: -webkit-gradient(linear, left top, left bottom, from(#65d672), to(#a265d4));
    background: -webkit-linear-gradient(top, #65d672, #a265d4);
    background: -moz-linear-gradient(top, #65d672, #a265d4);
    background: -ms-linear-gradient(top, #65d672, #a265d4);
    background: -o-linear-gradient(top, #65d672, #a265d4);
    background-image: -ms-linear-gradient(top, #65d672 0%, #a265d4 100%);
    padding: 12px 8px;
    padding-right: 23px 46px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    text-shadow: #bd7f7f 0 1px 0;
    color: #066b6b;
    font-size: 24px;
    font-family: helvetica, serif;
    text-decoration: none;
    vertical-align: middle;
}

Answer 1

您可以使用位置，例如：

.BackButton {
  postition: fixed; //can also use absolute
  left: 0;
  top: 0;
 }

您可以从那里开始。

Answer 2

您可以在后退按钮上尝试此操作，因为这会拉动您的元素，而不是添加到元素中。

margin-top: -29%;

尽管这不是干净的解决方案，但更多的是技巧。实际上，我建议您按预期的顺序在DOM中按正确的顺序放置后退按钮，然后将标题问题（h1 / h2 / h3）更改为 display：inline-block ，并在其上添加后退按钮的大小以使文本正确居中。如果您使用此技巧，最终可能会得到一个按钮，其中包含某些分辨率和浏览器上的标题。

无论我如何尝试，为什么我的按钮都不会向上移动？

2 个答案: