Как разместить один div по вверх другого div используя flex

Question

/* manrope-200 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-200.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-300 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-300.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-regular - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-500 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-500.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-600 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-600.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-700 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-700.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* manrope-800 - cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese */

@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/manrope-v15-cyrillic_cyrillic-ext_greek_latin_latin-ext_vietnamese-800.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.body {
  font-family: "Manrope", sans-serif;
  font-style: normal;
  line-height: 1.2;
  font-weight: normal;
  background-color: #F9F9F9;
}

img {
  max-width: 100%;
  height: auto;
}


/* .parent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
} */

.parent {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.main_box {
  width: 360px;
  height: 358px;
  border-radius: 10px;
  background-color: #E0E0E0;
}

.login_text {
  margin-left: 131px;
  margin-right: 131px;
  margin-top: 45px;
  font-size: 40px;
  font-weight: 700;
}

.input_login {
  width: 305px;
  height: 50px;
  margin-left: 28px;
  margin-right: 27px;
  margin-top: 25px;
  border-radius: 7px;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #EFF0F6;
  border-radius: 0.25rem;
}

.button_login {
  width: 153px;
  height: 39px;
  margin-left: 104px;
  margin-right: 103px;
  margin-top: 18px;
  padding-top: 8.5px;
  padding-bottom: 8.5px;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6.25px;
  border: none;
  background-color: white;
  color: black;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.5);
}

.button_login:hover,
.button_login:active {
  background-color: #FFFAFA;
}

input:focus {
  outline: none;
  /* Убирает обводку при фокусировке */
}

.logo {
  width: 243px;
  height: 119px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 138px;
  text-align: center;
}

.logo_text {
  text-align: center;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
</head>

<body class="body">
  <div class="parent">
    <div class="logo">
      <img src="img/Rectangle 69.svg" alt="ЕСМ" class="logo_img">
      <p class="logo_text">
        Единая система<br/> мониторинга и управления<br/> качеством питания
      </p>
    </div>
    <div class="main_box">
      <h1 class="login_text">
        Вход
      </h1>
      <input type="text" class="input_login">
      <input type="text" class="input_login">
      <!-- <div class="button-login-box">
                <a href="" class="button_login">
                    Вход
                </a>
            </div> -->
      <button type="submit" class="button_login">Вход</button>
    </div>
  </div>
</body>

</html>

Сейчас если я использую

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

для того чтобы поставить div c классом logo по вверх main_box то logo просто остается на месте не двигаясь если я уменьшаю высоту страницы тем вренем main_box двигается. Как исправить?

БЛОГ НА HUSL

Как разместить один div по вверх другого div используя flex

Ответы (0 шт):