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中的形状上放置按钮？

3 个答案: