CSS ‘position’ Özelliği ve Kullanım Örnekleri

css  |     |  

CSS ‘te position özelliği, bir elementin web sayfasında nasıl konumlandırılacağını belirlemek için kullanılır. Diğer bir ifade ile elementin web sayfasındaki konum davranışını tanımlar. CSS position özelliği 5 farklı değer alabilir. Bunlar;

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

Şimdi bu 5 değerin Html elementlerinde nasıl bir etkiye sahip oluğunu görelim. Bu etkileri görmek için 3 kutu ve bir kapsayıcıdan olan aşağıdaki Html kodlarını hazırladım.

 <!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>Document</title>
    <style>
        /* Reset style */
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        /*POSITION EXAMPLE STYLE */
        .parent-box{
            margin: 10px;
            width: 600px;
            height: 210px;
            display: flex;
            justify-content: space-between;
            background:  #998CEB;
        }
        .box-1{
            margin: 30px;
            width: 200px;
            height: 150px;
            background-color:#B4FE98;
        }
        .box-2{
            margin: 30px;
            width: 200px;
            height: 150px;
            background-color:#77E4D4;
        }
        .box-3{
            margin: 30px;
            width: 200px;
            height: 150px;
            background-color:#FBF46D;
        }
    </style>
</head>
<body>
    <div class="parent-box">
        <div class="box-1">
        </div>
        <div class="box-2">
        </div>
        <div class="box-3">
        </div>
    </div>
</body>
</html>

1-) Static :

Html elementi Web sayfasında normal akışındaki pozisyonuna konumlanır. Html elementlerin position özelliği ön tanımlı olarak static ‘tir. olarak top, bottom, left, right ve z-index CSS özelliklerine yanıt vermez.

2-) Relative :

Html elementine position:relative; özelliği verdiğimizde, normal konumuna göre yeniden pozisyon alır. Element web sayfasının normal akışında yer almaya devam eder yerini başka bir element işgal edemez. Aşağıdaki kodda box-2 kutusunun position özelliğini relative yaptık. Resimde görüldüğü gibi normal konumundan aşağı ve sola 20px yer değiştirdi.

.box-2{
            margin: 30px;
            width: 200px;
            height: 150px;
            background-color:#77E4D4;
  /*position: relative example*/
            top:20px;
            left:20px;
            position: relative;
        }
position:relative örneği

3-) Absolute:

Html elementine position:absolute; özelliği verdiğimizde, element en yakın ebeveyn elementine göre yeniden konumlanır. top, bottom, left, right ve z-index CSS özelliklerine göre konumu ebeveyn elementine göre ayarlanabilinir. Element web sayfasının normal akışında yer almaz. Aşağıdaki örnekte görüldüğü gibi box-3 elementi box-2 elementin yerini almıştır. 

.box-2{
            margin: 30px;
            width: 200px;
            height: 150px;
            background-color:#77E4D4;
  /*position: relative example*/
            top:20px;
            left:20px;
            position: absolute;
        }
position:absolute örneği

4-) Fixed:

Html elementine position:fixed; özelliği verdiğimizde, element web sayfasının normal akışından çıkar. Web sayfasının ekranda görünen kısmında(viewport) top, bottom, left, right ve z-index CSS özelliklerine göre konumu belirlenir. Ekran penceresi kaydırılsa bile element ekranda kalmaya devam edecektir.

Viewport: Sayfanın o anki görüntü alanına viewport denir. 

Örneğin web sayfalarında sayfanın başına git butonu position:fixed özelliği ile yapılabilinir.

<style>
  .back-to-top {
            position: fixed;
            right: 2rem;
            bottom: 2rem;
            padding: 10px;
            border-radius: 5px;
        }
</style>
<body>
    <button class="back-to-top">Back To Top</button>
</body>
position:fixed örneği

5-) Sticky:

Html elementine position:sticky; özelliği verdiğimizde element kaydırma çubuğu gelene kadar normal konumunu koruyacak, kaydırma çubuğu gelince de ekranda position:fixed gibi davranacaktır.

<style>
  .sticky-element{
            text-align: center;
            background-color: #77E4D4;
            padding: 10px 0px;
            font-size: 24px;
            color:darkslateblue;
            position: sticky;
            top: 0;
        }
</style>
<body>
    <h1 class="sticky-element">Sticky Title</h1>
</body>
position:sticky özelliği kaydırma çubuğu ilk halinde

Aşağıdaki resimde görüldüğü gibi kaydırma çubuğu aşağı indirildiğinde sticky tanımlı element ekranın tepesinde sabit olarak durmaktadır.

position:sticky özelliği kaydırma çubuğu aşağı kaydırlmış hali

Bu yazıda CSS’ te sıkça kullanılan ve kafa karıştıran position özelliğini anlattım.

Başarılar Dilerim …