проблема потока содержимого с относительным и фиксированным свойством

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Надеюсь, все у вас хорошо, я столкнулся с небольшой трагической проблемой. Я хочу сделать простую страницу входа в систему с некоторым привлекательным стилем.

Но когда я начал кодировать, результат был другим

Мой элемент h1 не виден. Он отображается в верхней части окна сообщения, и это моя проблема. Помогите мне разобраться в этом Это мой HTML-код

 /*Global part */
    @font-face {
        font-family: roboto;
        src: url('../files/fonts/Roboto/Roboto-Regular.ttf');
    }
    @font-face {
        font-family: pacifico;
        src: url('../files/fonts/Pacifico/Pacifico-Regular.ttf');
    }
    :root{
        --message-box-color:       #3D46E8;
        --message-color:           #ffffff;
        --font-color:              #000000;
        --input-field-color:       #E0E0E0;
        --input-field-focus-color: #EB5757;
    }
    
    
    /*Header Part */
    *{
        box-sizing: border-box;
    }
    *:before,
    *:after{
        box-sizing: border-box;
    }
    body {
        position: relative;
        margin: 0;
        padding: 0;
        font-family: roboto;
        font-weight: 700;
    }
    
    
    /*Message box*/
    .message-inner-box{
        position: fixed;
        top: -50px;
        left: -50px;
        height: 300px;
        width:  300px;
        border-radius: 50%;
        background-color: var(--message-box-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .title-container {
        margin-top: 50px;
        color: var(--message-color);
    }
    .title-container p {
        margin: 0;
    }
    .heading {
        font-size: 1.3em;
        font-weight: 600;
    }
    .subheading {
        font-size: 2em;
        font-weight: 800;
    }

 <!DOCTYPE html>
<html>
    <head>
        <?php include_once('head.php'); ?>
        <title>Sign Up</title>
    </head>
    <body>
         <div class="container-fluid">
         <div class="row">
            <div class="col-md-6">
            <div class="message-container">
                <div class="message-inner-box">
                    <div class="title-container clearfix">
                        <p class="heading"> Hello, </p>
                        <p class="subheading"> Sign Up!</p>
                    </div>
                </div>
                </div>
        <h1> Welcome </h1>
    </body>
</html>

1. в вашем HTML нет элемента h1, какой h1 вы имеете в виду?

2. Извините, дорогой, я забыл поставить тег h1. Теперь я редактирую свой вопрос. Вы можете просмотреть

3. У вас есть 6 открывающих <div> тегов, но только 3 закрывающих </div> . На данный момент ваш h1 находится внутри <div class="col-md-6">

Ответ №1:

Ваш h1 есть, он просто скрыт за div с классом message-inner-box , который вы можете увидеть, добавив position: absolute; в свой стиль h1,

 /*Global part */
    @font-face {
        font-family: roboto;
        src: url('../files/fonts/Roboto/Roboto-Regular.ttf');
    }
    @font-face {
        font-family: pacifico;
        src: url('../files/fonts/Pacifico/Pacifico-Regular.ttf');
    }
    :root{
        --message-box-color:       #3D46E8;
        --message-color:           #ffffff;
        --font-color:              #000000;
        --input-field-color:       #E0E0E0;
        --input-field-focus-color: #EB5757;
    }
    
    
    /*Header Part */
    *{
        box-sizing: border-box;
    }
    *:before,
    *:after{
        box-sizing: border-box;
    }
    body {
        position: relative;
        margin: 0;
        padding: 0;
        font-family: roboto;
        font-weight: 700;
    }
    
    
    /*Message box*/
    .message-inner-box{
        position: fixed;
        top: -50px;
        left: -50px;
        height: 300px;
        width:  300px;
        border-radius: 50%;
        background-color: var(--message-box-color);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .title-container {
        margin-top: 50px;
        color: var(--message-color);
    }
    .title-container p {
        margin: 0;
    }
    .heading {
        font-size: 1.3em;
        font-weight: 600;
    }
    .subheading {
        font-size: 2em;
        font-weight: 800;
    }
    h1 {
        position: absolute;
    }

 <!DOCTYPE html>
<html>
    <head>
        <?php include_once('head.php'); ?>
        <title>Sign Up</title>
    </head>
    <body>
         <div class="container-fluid">
         <div class="row">
            <div class="col-md-6">
            <div class="message-container">
                <div class="message-inner-box">
                    <div class="title-container clearfix">
                        <p class="heading"> Hello, </p>
                        <p class="subheading"> Sign Up!</p>
                    </div>
                </div>
                </div>
        <h1> Welcome </h1>
    </body>
</html>

1. Спасибо, дорогая. но можете ли вы объяснить мне, почему это происходит

2. См. Комментарий Мишеля для этого. Кроме того, называть кого-то «дорогим» здесь звучит действительно жутко, пожалуйста, прекратите это