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

Question

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

到目前为止，这是我的 CSS 和 HTML：

HTML:

html {
        height: 100%;
        background-size: cover;
        background: #a5fcff;
        background-repeat:no-repeat;
        background: linear-gradient(#00033a, #a5fcff);
    }
    
    .signinbutton {
        background-color: #458af9;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        display: block;
        font-size: 75px;
        margin: 4px 2px;
        cursor: pointer;
     transition-duration: 0.5s;
     margin-left: auto;
     margin-right: auto;
     margin-top: 225px;
    }
    
    .signinbutton:hover {
     background-color: #a7acb7;
    }
    
    .createaccbutton {
        background-color: #458af9;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        display: block;
        font-size: 75px;
        margin: 4px 2px;
        cursor: pointer;
     transition-duration: 0.5s;
     margin-left: auto;
     margin-right: auto;
     margin-top: 100px;
    }
    
    .createaccbutton:hover {
     background-color: #a7acb7;
    }

<html>
  <head>
    <title>Debate Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class = "square"></div>
    <button class = "signinbutton">SIGN IN</button>
    <button class = "createaccbutton">SIGN UP</button>
  </body>
</html>

更新：抱歉，我希望网站屏幕看起来像这样： Login Screen mock-up 但它目前看起来像这样： Actual login screen so far

Answer 1

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

示例样式：

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

Working example

Answer 2

如上所述使用position: absolute;。如果你最终在另一个之上的东西（掩盖下面的东西）那么你可以使用 z-index: [number]; 来指定什么在什么之上。

Answer 3

1) 首先，编辑您的 html、body 样式。

html {
  height:100%
}
body {
  background: #a5fcff;
  background: linear-gradient(#00033a, #a5fcff); /* background first, followed by the other options */
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment: fixed /* for repeating gradient */
}

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 */
}

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

How to place a button over a shape in CSS?

html

css

shapes