Align Text to Down-CodePudding

I stated my problem in the title. I want to put the container(ID is about) div below the image. I tried many methods, but now my brain is burned :D I think it's related to position. I would be very happy if you help. Thanks in advance. (Note: I will make the design responsive near completion. You'll get the best results if you work on a 1920x1080 screen.)

My Code:

window.addEventListener("scroll", function(){
    var header = document.querySelector("nav");
    header.classList.toggle("sticky",window.scrollY > 0);
})

.fs-xl {
    font-size: 3rem;
}

.about{
    position: absolute;
}

.loginbutton {
    border: transparent;
    background-color: transparent;
    display: block !important;
}

.gotham-ultra {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    transform: translate(-50%, 85%) !important;
}

.mainpageanimate {
    animation: mpa 1s ease-in-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

.navbar {
    transition: 0.25 ease;
}

.sticky {
    background-color: #f8f9fa !important;
}


.sticky .container-fluid .collapse ul li a {
    color: #212529 !important;
}

.sticky .container-fluid .collapse ul li .loginbutton {
    display: none !important;
}

@keyframes mpa {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }

}

<!DOCTYPE html>
<html>

<head>
    <title>Yottalogy - Ana Sayfa</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="img/icon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="http://fonts.cdnfonts.com/css/montserrat">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body >

    <nav id="header" >
        <div >
            <button  type="button" data-bs-toggle="collapse" ria-expanded="false"
                aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarColor01">
                <ul >
                    <li >
                        <a  aria-current="page" href="#">Ana Sayfa</a>
                    </li>
                    <li >
                        <a  href="#">Dersler</a>
                    </li>
                    <li >
                        <a  href="#">Blog</a>
                    </li>
                    <li >
                        <a  href="#">Forum</a>
                    </li>
                    <li >
                        <a  href="#">Destek</a>
                    </li>
                </ul>
                <ul >
                    <li >
                        <button type="button" >Giriş Yap</button>
                    </li>
                    <li >
                        <button type="button" >Hesap Aç</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <img src="https://cdn.statusqueen.com/desktopwallpaper/thumbnail/city-Hd_4k_desktop_wallpaper_photos-512.jpg" >

    <div >
        <p >BİLGİNİN
            EFENDİSİ OLMAK İÇİN ÇALIŞMANIN UŞAĞI OLMAK GEREKİR.</p>
    </div>

    <div id="about" >
        <div >
            <div >
                <img src="" alt="">
            </div>
            <div >
                <h1 >Lorem Ipsum</h1>
                <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet nisi nec lorem dictum
                    pellentesque. Integer semper risus tortor, in ornare nisi interdum nec. Cras sit amet orci eros.
                    Pellentesque pulvinar suscipit turpis, nec sodales turpis tincidunt quis. Integer a ipsum a ligula
                    pharetra maximus sed placerat lectus. Curabitur euismod a est vitae malesuada. Phasellus elementum
                    eleifend risus, non porttitor sapien dictum mattis.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
    </script>

</body>

</html>

CodePudding user response：

There is a lot of position absolute elements in your page that doesn't seem to need it.

Put the image as background and remove the all absolute positioning styles.

You can use flex for centering elements instead.

Also if you want some section to be full height of screen, then use 100vh for that.

Do this and all the issues that burning your head will be gone.

Also if you're a beginner, then try creating some pages from scratch to get an idea how things work, rather that start with a template.