v2.5.2
Giriş yap

Css Position Verme Problemi

yazilimyolcusu
233 defa görüntülendi

Merhabalar arkadaşlar. Arkadaşlar, sarı alana yazı eklediğimde footer'ın üzerine geliyor. Nasıl çözülebilir acaba bu sorun. Kodlar aşağıda. Resim aşağıda.
https://hizliresim.com/9wgj2v8

    <div class="container">
        <div class="hizmetlerimiz_div">
            <div class="hizmetlerimiz_ustyazi_div">
                <div class="hizmetlerimiz_ustyazi">TÜZEL KİŞİLİK HİZMETLERİ</div>
                <img src="images/hizmetlerimiz/ss.jpg" alt="">

                <div class="hizmetlerimiz_yazi_genel_div">
                    <div class="hizmetlerimiz_konu_div">
                        TÜZEL KİŞİLİK HİZMETLERİ
                    </div>

                    <div class="hizmetlerimiz_yazi_div">
                        * Kişilik Hizmetleri 1
                    </div>
                    <div class="hizmetlerimiz_yazi_div">
                        * Kişilik Hizmetleri 2
                    </div>
                    <div class="hizmetlerimiz_yazi_div">
                        * Kişilik Hizmetleri 2
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php include("footer.php"); ?>
.hizmetlerimiz_div {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;

}

.hizmetlerimiz_ustyazi_div {
    position: relative;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 50vh;
    justify-content: center;
    font-size: 40px;
    font-family:'Times New Roman', Times, serif;
    text-decoration: underline;
}

.hizmetlerimiz_ustyazi {
    position: absolute;
    width: 50%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    padding-top: 100px;
    margin-left: 25%;
    z-index: 99999999;
}

.hizmetlerimiz_ustyazi_div img {
    position: absolute;
    width: 100%;
    height: 50vh;
}

.hizmetlerimiz_yazi_genel_div {
    position: absolute;
    width: 50%;
    height: auto;
    align-items: center;
    text-align: center;
    margin-top: 180px;
    margin-left: 25%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    z-index: 99999999;
    background-color: #fff;
}

.hizmetlerimiz_konu_div {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40px;
    justify-content: left;
    align-items: center;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
    background-color: #ccc;
    margin-top: 10px;
    padding-left: 2%;
    font-weight: bold;
}

.hizmetlerimiz_yazi_div {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40px;
    justify-content: left;
    align-items: center;
    font-size: 20px;
    font-family:'Times New Roman', Times, serif;
    background-color: orange;
    padding-left: 7%;
    margin-top: 10px;
}
devepdogukan
353 gün önce

Eğer bir eleman'a position tanımlaması yaparsan o eleman varsayılan box model'inin dışına çıkmış olur.
Bu ne demek?
Normalde elemanlar display tanımlamasına göre box modelleri değişir. Örnek block bir elemanın her zaman yeni satırda (eski block olan elemanın altında) oluşmasını sağlar.
position verdiğin an bu tanım ortadan kalkıyor. Normalde alt alta olması gereken yapı üst üste binmeye başlar. position kullanacaksan parent div'in spesifik bir height width'i olması gerek veya direkt position kullanma :)
position neden tercih edilir ? Eğer bir eleman sayfanın herhangi bir yerinde (veya bir parent'ı baz alarak) konumlanacaksa veya sabitlenecekse kullanılmalı
Ekstra olarak padding veya marginlerde % kullanmamalısın. Bunun yerine rem veya em'i kullanabilirsin