Что делать если элемнт появляеться слишком низко HTML5, CSS?

Question

Я верстаю сайт по теме информационной безопасности на html и css и хочу разделить информацию линией. Линию я смог сделать но она как-то криво появляется...

* {
    font-family: "Roboto", sans-serif;
}

body {
    background-color: #1F1230;
    color: white;
}

.connection {
    background-color: #3e255e;
    height: 165px;
    width: 165px;
    border: 0.5px solid #fff; /* Белая рамка */
    border-radius: 10px; /* Радиус скругления */
}

.line {
    margin: 166px;
    border-left: 2px solid white;
    height: 500px;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>?RemotePC?</title>
    <script src="eel.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" id="theme-link">
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <div class="connection">
        <br \>
        <center><img src="images/lock.png"></center>
    </div>
    <div class="line"></div>
    <script type="text/javascript">     
        window.onresize = function () 
        {
            window.resizeTo(1100, 625);
        }
    </script>
</body>
</html>

ВОТ ПОЛНЫЙ КОД НА CodePen Кто может помогите пожалуйста!!!!!!

Answer 1

Можно поднять линию, задав элементу абсолютное позиционирование. Для этого необходимо задать position: relative тому элементу, относительно которого вы хотите расположить вашу линию.

Используя ваш код, добавьте:

.connection{
    position: relative;
}

.line{
    position: absolute;
    bottom: 0;
}

Таким образом, линия поднимется на самый верх страницы. О том, как работают различные виды позиционирования, можно ознакомиться тут: https://developer.mozilla.org/ru/docs/Web/CSS/position

БЛОГ НА HUSL

Что делать если элемнт появляеться слишком низко HTML5, CSS?

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