Html 如何在CSS中在形状上放置按钮？

我正在创建一个具有登录和登录功能的网站，并希望将按钮放置在渐变上方但按钮下方的纯深蓝色背景上。当我尝试创建一个形状时，按钮在网站上向下移动以容纳空间，但我希望形状位于按钮下方的一层上，但仍然可见。在CSS中有什么方法可以做到这一点吗？ 如果是，怎么做？谢谢：）

以下是我迄今为止的CSS和HTML：

HTML:

html{
身高：100%；
背景尺寸：封面；
背景：#a5fcff；
背景重复：无重复；
背景：线性梯度（#00033a，#a5fcff）；
}
.签名按钮{
背景色：#458af9；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
显示：块；
字体大小：75px；
利润：4倍2倍；
光标：指针；
过渡时间：0.5s；
左边距：自动；
右边距：自动；
边缘顶部：225px；
}
.登录按钮：悬停{
背景色：#a7acb7；
}
.createaccbutton{
背景色：#458af9；
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
显示：块；
字体大小：75px；
利润：4倍2倍；
光标：指针；
过渡时间：0.5s；
左边距：自动；
右边距：自动；
边缘顶部：100px；
}
.createaccbutton:悬停{
背景色：#a7acb7；
}

辩论网站
登录
注册

您可以相对于html或其他容器定位元素绝对值

示例样式：

.square {
  position: absolute;
  top: 0;
  margin-left: auto;
  height: 200px;
  width: 200px;
  background: #f00;
  margin-right: auto;
  left: 0;
  right: 0;
}

---

使用

位置：绝对如上所述。如果你最终得到一个在另一个上面的东西（覆盖下面的东西），那么你可以使用
z-index:[number]
要指定位于内容之上的内容。
1）首先，编辑html的主体样式

2）自定义
.square
元素（如果需要）

.square {
  position: absolute;
  top:0; /* above the gradient */
  left:0;margin-left:auto;right:0;margin-right:auto; /* center position:absolute element */
  height: 200px;
  width: 200px;
  background: #0000ff
}

4）为按钮添加一行
margin
行，并删除其他行

.signinbutton {
  margin: 225px auto 0 auto; /* 225px for top, auto for right&left, 0px for bottom */
}
.createaccbutton {
  margin: 100px auto 0 auto; /* 100px for top, auto for right&left, 0px for bottom */
}

对于这个问题，可能需要添加一张您希望最终得到的图片。谢谢，非常有帮助：）很高兴我能提供帮助：）谢谢，非常有帮助：）
.signinbutton {
  margin: 225px auto 0 auto; /* 225px for top, auto for right&left, 0px for bottom */
}
.createaccbutton {
  margin: 100px auto 0 auto; /* 100px for top, auto for right&left, 0px for bottom */
}