Altın Konu Web Geliştirme Css Taşması(Overflow)

Nizam-ı Alem · 30 Kas 2025

CSS taşması, bir öğenin kutusuna sığmayan içeriğin nasıl işleneceğini kontrol eder. Kaydırma ve fazla içeriğin görünürlüğünü yönetir.
Taşan içerik gizlenebilir, kaydırılabilir veya gösterilebilir. Yaygın değerler: visible, hidden, scroll, auto.
Düzeni düzenli tutmak ve içerik çakışmasını önlemek için kullanılır.

Şimdi bunu bir örnek yardımıyla anlayalım:

CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 200px;
  height: 40px;
  border: 1px solid black;
  overflow: auto;
}
</style>
</head>
<body>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<div>
  Bu, CSS taşmasına bir örnektir. Kutunun içindeki içerik sığmayacak kadar uzun olduğunda, geri kalanını görmenizi sağlayan bir kaydırma çubuğu görünür.
</div>

</body>
</html>

Taşma: auto özelliği, içerik kutudan büyük olduğunda kaydırma çubuğu ekler.
Kutu, siyah kenarlıklı sabit genişlik ve yüksekliğe sahiptir.
Kutu içinde fazla metin kaydırılarak görüntülenebilir.

Sözdizimi:

overflow: visible | hidden | scroll | auto;

Özellik Değerleri

Taşma özelliği aşağıdaki değerleri içerir:

visible: İçerik kırpılmaz ve öğe kutusunun dışında görüntülenir.
hidden: Taşma kırpılır ve fazla içerik görünmez.
scroll: Taşma kırpılır, ancak içeriği görmek için kaydırma çubuğu eklenir. Kaydırma çubuğu yatay veya dikey olabilir.
auto: Gerektiğinde otomatik olarak kaydırma çubuğu ekler.
overflow-x ve overflow-y: Taşmanın yatay (x) veya dikey (y) olarak nasıl kontrol edileceğini belirtir.

CSS Taşma Örnekleri

Örnek 1: Bu örnekte overflow: visible; değeri kullanılır.

CSS:

<!DOCTYPE>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
    <style>
        p {
            width: 100px;
            height: 80px;
            border: 1px solid;
            overflow: visible;
        }
    </style>
</head>

<body>
    <h2>
        TURKMMO
    </h2>
    <p>
        CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
    </p>

</body>

</html>

Örnek 2: Bu örnekte overflow: scroll; özelliğini kullanıyoruz.

CSS:

<!DOCTYPE>
<html>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <h2>
        TURKMMO Web Geliştirme Css Eğitimi
    </h2>

    <p>
       CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
    </p>

</body>

</html>

Örnek 3: Bu örnekte overflow: auto; özelliğiyiz.

CSS:

<!DOCTYPE>
<html>
<!--Turkmmo Web Geliştirme CSS Eğitimi-->
<head>
    <style>
        p {
            width: 120px;
            height: 100px;
            border: 1px solid;
            overflow: auto;
        }
    </style>
</head>

<body>
    <h2>
        Turkmmo Web Geliştirme CSS Eğitimi
    </h2>

    <p>
        CSS taşması, büyük içerikleri kontrol eder.
İçeriğin kırpılıp kırpılmayacağını veya
kaydırma çubuklarının eklenip eklenmeyeceğini belirler.
    </p>

</body>

</html>

CSS overflow kullanırken dikkat edilmesi gereken başlıca noktalar şunlardır:

Sabit yükseklik veya genişlik olmadan overflow etkisizdir.
Bir öğe boyutlandırılmamışsa taşma oluşmaz ve overflow davranışı görünmez.
scroll her zaman kaydırma çubuğu oluşturur.
İçerik sığsa bile çubuklar görünür; bu nedenle gereksiz kaydırma çubuğu oluşabilir.
auto en pratik seçenektir fakat düzen değişikliklerine yol açabilir.
İçerik arttığında kaydırma çubuğu belirdiği için tasarım kayabilir.
hidden içerik kaybına neden olabilir.
Mobilde veya küçük ekranlarda metnin kesilmesine dikkat edilmelidir.
overflow-x ve overflow-y farklı kombinasyonlar oluşturur.
Tek yönde kaydırma isteniyorsa diğer yönün doğru ayarlandığından emin olunmalıdır.
Scrollbars farklı tarayıcılarda farklı görünür.
Tasarım uyumsuzluklarını önlemek için çapraz tarayıcı test yapılmalıdır.
Pozisyonlandırma ile birlikte kullanıldığında davranış değişebilir.
absolute, fixed veya flex/container yapılarında overflow sonuçları farklılık gösterebilir.
Mobilde yatay overflow tasarımın kaymasına sebep olabilir.
Küçük bir genişleme bile tüm sayfanın yana kaymasına yol açabilir.