Как разместить кнопку над формой в CSS? - PullRequest
Новая
       0

Как разместить кнопку над формой в CSS?

0 голосов
/ 03 декабря 2018

Я создаю веб-сайт с функцией входа и входа и хочу разместить кнопки на сплошном темно-синем фоне над градиентом, но под кнопками.Когда я пытаюсь создать фигуру, кнопки на веб-сайте перемещаются вниз, чтобы разместить в ней место, но я хочу, чтобы фигура находилась на слое под кнопками, но оставалась видимой.Есть ли способ сделать это в 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>

ОБНОВЛЕНИЕ: Извините, я хочу, чтобы экран веб-сайта выглядел следующим образом: Макет экрана входа в систему Но в настоящее время он выглядит следующим образом: Фактический экран входа в систему на данный момент

Ответы [ 3 ]

0 голосов
/ 03 декабря 2018

Используйте position: absolute;, как указано выше.Если у вас есть что-то поверх другого (прикрывая предмет снизу), вы можете использовать z-index: [number];, чтобы указать, что находится над чем-то.

0 голосов
/ 03 декабря 2018

1) Сначала отредактируйте ваш html, body style. 

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 */
}
0 голосов
/ 03 декабря 2018

Вы можете расположить элемент absolute относительно HTML или другого контейнера.

пример стиля: 

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

Рабочий пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...