Overflow

Dilimizdə daşmaq mənasını verən overflow, sərhədlərini təyin etdiyimiz qutu elementinin məzmununun sərhədləri aşması vəziyyətində necə davranacağını bildirən xüsusiyyətdir.
 
Quruluşu: overflow: <dəyər>
Aldığı dəyərlər: visible | hidden | scroll | auto | inherit
Başlanğıc dəyəri: visible
Tətbiq oluna bilən elementlər: Blok elementlər
İrsilik: Yoxdur
 
Aldığı dəyərləri bir-bir nəzərdən keçirək:
visible - Elementin məzmunu qutu sərhəddini keçsə də tam göstərir
hidden - Elementin məzmununun qutu sərhəddini keçən hissəsini gizlədir
scroll - Elementin məzmununun qutu sərhəddini keçən hissəsinə sürüşdürmə çubuğu (scroll) vasitəsilə çatmaq olur 
auto - Əgər elementin məzmunu qutu sərhəddini keçərsə avtomatik scroll əlavə edir
inherit - Valideyn (üst element) elementin dəyərini alır.
 
İndi isə aldığı dəyərlərin nəticəsini nümunələrlə görək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow visible</title>
<style>
   .layer {
    overflow: visible; /* Sərhədi keçən hissə görünür */
    width: 300px; /* Blokun eni */
    height: 150px; /* Blokun hündürlüyü */
    padding: 5px; /* Mətnin ətrafı boşluqlar */
    background-color: #CCC; /* Arxa fon rəngi */
   } 
</style>
</head>
<body> 
<div class="layer">
<h2>Duis te feugifacilisi</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div> 
</body>
</html>
 
Brauzerdə nəticə belə görünəcəkdir:
 

overflow-visible

 

Ölçülərini və fon rəngini müəyyən etdiyimiz bloka overflow:visible verdik. Beləcə blok daxilindəki yazıların blokun sərhəddindən kənara çıxan hissələri tam görünür.
Nəticəyə buradan da baxa bilərsiniz.
 
Yuxarıdakı kodlarda overflow:visible dəyərini overflow:scroll ilə dəyişsək, brauzerdə nəticə belə görünəcəkdir:
 

overflow-scroll

 
Göründüyü kimi, bu dəyişiklikdən sonra sərhəddi keçən hissələri görmək üçün scroll əlavə olundu.
Nəticəyə buradan da baxa bilərsiniz.

Həmin sətri overflow:hidden ilə dəyişsək, brauzerdə nəticə belə görünəcəkdir:
 

overflow hidden

 
Bu dəfə isə yazıların sərhəddi keçən hissəsi gizlənmiş olacaqdır.
Nəticəyə buradan da baxa bilərsiniz.

Bunlardan başqa CSS3 ilə yeni gələn iki xüsusiyyət daha vardır. overflow-xoverflow-y

overflow-x və overflow-y əslində overflow kimidir. Buradakı x və y overflow xüsusiyyətini üfüqi və şaquli olaraq iki növə ayıran xüsusiyyətlərdir. overflow-x xüsusiyyəti üfüqi vəziyyətdə sərhədi keçmək vəziyyəti baş verdikdə keçən hissələr üçündür. overflow-y da müvafiq olaraq şaquli hal üçündür.
CSS3