Position di css

saya ingin bertanya, kenapa saat saya membuat tag pada id[bawah,logo,jam] di bawah mid1, hasilnya akan jatuh kebawah sekali, terpaksa saya menggunakan absolute untuk mengatur jarak dari atas[top] dan kiri[left]? karena jika saya tidak menggunakan absolute pada id[bawah,logo,jam] tersebut terlalu jatuh kebawah dan jauh sekali dari mid1. jadi apa yang membuat id[bawah,logo,jam] terlalu kebawah ? terima kasih

.mid1{
                margin: 50px;
                width: 20px;
                height: 20px;
                background-color: aqua;
            }
            /* ----------- Bawah ------------*/
            #bawah{
                position: absolute;
                top: 85%;
                left: 50%;
                background-color: yellow;
            }
            /* ----------- logo -----------*/
            #logo{
                display: flex;
                justify-content: flex-start;
                position: absolute;
                top: 85%;
                left: 20px;
                background-color: rgba(100, 100, 100, 0);
            }
            /*------------ Jam -----------*/
            #jam{
                position: absolute;
                top:90%;
                left:90%;
            }