v2.5.2
Giriş yap

Css Position Verme Problemi

yazilimyolcusu
232 defa görüntülendi
2

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;
}
css
Cevap yaz
Cevaplar (2)
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

0
#013006
tyomro
353 gün önce

Selam,

Bana soru biraz eksik geldi. 

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

Yaptığında sarı butonların altına iniyor.

Bu butonlardan daha fazla adet olabilir mi? (8-10 adet) böyle bir durumda resmi uzatacak mısın?

footer kullanımını nasıl yaptın.

0
#013005