我的按钮卡在 Y/vertical 轴上

Question

我弄乱了显示和位置样式属性，但无论我尝试什么，我的元素都停留在垂直轴上。我从一个按钮生成器网站复制了 CSS 代码，一切正常，我什至在 javascript 中添加了一个功能，但我完全无法定位它。我才几周就开始 self-teaching 自己编写代码，目前 javascript 是我的强项，但显然，CSS 和 HTML 也能派上用场。感谢任何帮助。

#startButton {
    box-shadow: 0px 0px 12px 2px #3dc21b;
    background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Verdana;
    font-size:18px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    position: relative;
    top: 50%;
    left: calc(50% - 30px);
}
.startButton:hover {
    background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
    background-color:#5cbf2a;
}
.startButton:active {
    position:relative;
    top:1px;
}

如果有任何意义，我在 HTML 中有它自己的元素，它不在它自己的 div 或头部或 body 中。我不确定这是否有所作为。谢谢！

编辑：我已经弄清楚元素并不像我想的那样只是重叠。我了解到我的问题是按钮元素的 'space' 卡在 canvas 下方。我现在需要一种方法来重叠这些元素。

Answer 1

原因是父元素（在您的情况下为 body）没有静态高度。

因此您可以添加一个具有静态高度的父元素并包装您的 #startButton。

编辑您的html：

<div class="parent">
  <button id="startButton"> #Startbutton </button>
</div>

为父元素添加静态高度（例如300px）：

.parent {
  height: 300px;
}

Fiddle: https://jsfiddle.net/kongallis/chqn18us/6/

另请参阅：。

我的按钮卡在 Y/vertical 轴上

My button is stuck on the Y/vertical axis

css

button