Position

PostedTemmuz 2, 2021

UpdatedTemmuz 3, 2021

Byadmin

Css position, belirlenen nesnelerin sayfa içi konumlandırmasını yapmak için kullanılır.

Position Değerleri

Relative

Divler block elemanlardır, varsayılan olarak alt alta sıralanır. Nesnelerin konumlarını belirlememiz için relative özelliği kullanılır. Relative bulunduğu konum itibariyle akışına devam eder.

Css Kod

.box{
    width: 200px;
    height: 200px;
}

div{
    padding: 10px;
    font-weight: bolder;
    margin-bottom: 10px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    
 
}

#first{
    background: brown;

}
#second{
    background: chocolate;
    position:relative;
    top:75px;
    left:45px;

}

#third{
    background: wheat;
}

Html Kod

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css  - Position</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="box" id="first">Div1</div>
    <div class="box" id="second">Div2</div>
    <div class="box" id="third">Div3</div>
    

</body>
</html>

Absolute

Absolute bulunduğu akışın dışına çıkar. Tarayıcının sol üst kenar kısmından itibaren konumlanır.

Css Kod

.box{
    width: 200px;
    height: 200px;
}

div{
    padding: 10px;
    font-weight: bolder;
    margin-bottom: 10px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    
 
}

#first{
    background: brown;

}
#second{
    background: chocolate;
    position:absolute;
    top:75px;
    left:45px;

}

#third{
    background: wheat;
}

Fixed

Nesneleri sabit konumlandırmak için kullanılır.

Css Kod

.box{
    width: 200px;
    height: 200px;
}

div{
    padding: 10px;
    font-weight: bolder;
    margin-bottom: 10px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    
 
}

#first{
    background: brown;

}
#second{
    background: chocolate;
    position:absolute;
    top:75px;
    left:45px;

}

#third{
    background: wheat;
    position: fixed;
    top:0px;
    right: 25px;
}

Sticky

Belirtilen konum yakalandığında ilgili nesneyi sabit konumlandırır. Genelde menü vb. yapılarda kullanılır.

Css Kod

.box{
    width: 200px;
    height: 200px;
}

div{
    padding: 10px;
    font-weight: bolder;
    margin-bottom: 10px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    
 
}

#first{
    background: brown;
    position: sticky;
    top:50px;
    width: 100%;

}
#second{
    background: chocolate;
    position:absolute;
    top:300px;
    left:45px;

}

#third{
    background: wheat;
    position: fixed;
    bottom:0px;
    right: 25px;
}

Html Kod

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css  - Position</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>Sticky Örneği</h1>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum provident sequi dignissimos quam itaque quas ad? Molestiae voluptate quaerat similique quidem, repellat reiciendis facere recusandae, eveniet nobis fugiat maxime veniam?
    </span>
    
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum provident sequi dignissimos quam itaque quas ad? Molestiae voluptate quaerat similique quidem, repellat reiciendis facere recusandae, eveniet nobis fugiat maxime veniam?
    </span>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum provident sequi dignissimos quam itaque quas ad? Molestiae voluptate quaerat similique quidem, repellat reiciendis facere recusandae, eveniet nobis fugiat maxime veniam?
    </span>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum provident sequi dignissimos quam itaque quas ad? Molestiae voluptate quaerat similique quidem, repellat reiciendis facere recusandae, eveniet nobis fugiat maxime veniam?
    </span>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum provident sequi dignissimos quam itaque quas ad? Molestiae voluptate quaerat similique quidem, repellat reiciendis facere recusandae, eveniet nobis fugiat maxime veniam?
    </span>
    <div class="box" id="first">Div1</div>
    <div class="box" id="second">Div2</div>
    <div class="box" id="third">Div3</div>
    <div style="height:3500px"></div>
    

</body>
</html>