Çerezler
Bu web sitesi sizlere daha iyi hizmet verebilmek için çerezleri kullanır.
Bu, sayfanın ana içeriğidir. Geniş ekranlarda bile belirli bir genişliği aşmayarak okunabilirliği artırır.
... diğer içerikler ...
Web tasarımında estetik ve kullanıcı deneyimi açısından düzenli bir yerleşim, bir sayfanın başarısı için kritik öneme sahiptir. CSS (Cascading Style Sheets), öğelerin konumlandırılması ve hizalanması konusunda güçlü araçlar sunar. Bu kılavuz, metinlerden kutu modellere kadar çeşitli web öğelerini etkili bir şekilde hizalamak için kullanabileceğiniz CSS özelliklerini teknik bir yaklaşımla ele almaktadır. Sayfa düzeninizi optimize etmek ve görsel hiyerarşiyi güçlendirmek için bu özelliklerin nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.
CSS'te hizalama işlemleri, genellikle bir seçiciye uygulanan özellik-değer çiftleri şeklinde ifade edilir. Hizalama özelliği, belirli bir bağlama veya kapsayıcıya göre öğenin konumunu belirler. Temel sözdizimi aşağıdaki gibidir:
selector {
alignment-property: value;
}
Burada selector, stillerin uygulanacağı HTML öğesini veya öğe grubunu temsil eder. alignment-property, hizalama türünü belirleyen CSS özelliğidir (örneğin, text-align, justify-content) ve value ise bu hizalamanın nasıl gerçekleştirileceğini (örneğin, center, flex-start) tanımlar.
CSS'te hizalama, farklı bağlamlarda çeşitli özellikler aracılığıyla sağlanır. İşte en yaygın kullanılan hizalama yöntemleri ve özellikleri:
Metin ve Satır İçi Öğelerin Hizalanması (text-align):
Bu özellik, bir blok öğesinin içindeki metni ve satır içi (inline) öğeleri yatay olarak hizalamak için kullanılır. Yaygın değerleri left, right, center ve justify'dir.
Dikey Hizalama (vertical-align):inline, inline-block veya table-cell öğelerinin dikey hizalamasını kontrol eder. Genellikle metin ve ikonların aynı satırda dikey olarak hizalanmasında kullanılır. Değerleri arasında top, middle, bottom, baseline ve yüzde değerleri bulunur.
Blok Öğeleri Yatay Ortalamak ( Flexbox ile Hizalama: CSS Grid ile Hizalama: Aşağıdaki örnekler, farklı hizalama senaryolarını göstermektedir. Bir paragraf içindeki metni ortalamak için Bu metin ortalanmış olacaktır. Belirli bir genişliğe sahip bir Bu blok öğe ortalanmıştır. Bir kapsayıcı içindeki öğeleri hem yatay hem de dikey olarak ortalamak için Flexbox kullanılır. Bir grid kapsayıcısındaki öğeyi veya öğeleri hem yatay hem de dikey olarak ortalamak için Grid özellikleri kullanılır. Bağlama Duyarlılık: Hizalama özellikleri, uygulandıkları kapsayıcının veya öğenin Genişlik Kısıtlaması: Bir blok öğeyi Dikey Ortalamada Zorluklar: Geleneksel CSS yöntemleriyle (Flexbox veya Grid olmadan) dikey ortalama genellikle daha karmaşıktır. Flexbox ve Grid Ekseni Anlayışı: Flexbox ve Grid'de hizalama yaparken, ana eksen (main-axis) ve çapraz eksen (cross-axis) kavramlarını iyi anlamak kritiktir. Tarayıcı Uyumluluğu: Özellikle Flexbox ve Grid gibi modern layout modülleri, güncel tarayıcılarda geniş çapta desteklenmektedir. Ancak eski tarayıcıları hedefliyorsanız, ön ekler (vendor prefixes) veya alternatif yöntemler kullanmanız gerekebilir.margin: auto):
Belirli bir genişliğe sahip blok seviyesi öğeleri (örneğin, ) yatay olarak ortalamak için
margin-left ve margin-right özelliklerini auto olarak ayarlamak yaygın bir yöntemdir. Bu, genellikle margin: 0 auto; şeklinde kullanılır.
CSS Flexbox, öğeleri tek boyutlu bir eksen boyunca (yatay veya dikey) hizalamak için güçlü bir model sunar.
justify-content: Ana eksen boyunca (varsayılan olarak yatay) öğelerin nasıl dağıtılacağını kontrol eder. Değerleri: flex-start, flex-end, center, space-between, space-around, space-evenly.align-items: Çapraz eksen boyunca (varsayılan olarak dikey) öğelerin nasıl hizalanacağını kontrol eder. Değerleri: flex-start, flex-end, center, stretch, baseline.align-self: Tek bir flex öğesinin çapraz eksendeki hizalamasını, kapsayıcının align-items değerini geçersiz kılarak ayarlar.
CSS Grid, öğeleri iki boyutlu (hem yatay hem dikey) bir ızgara içinde hizalamak için tasarlanmıştır.
justify-items: Bir grid kapsayıcısının içindeki öğelerin satır içi (inline) eksende nasıl hizalanacağını kontrol eder. Değerleri: start, end, center, stretch.align-items: Bir grid kapsayıcısının içindeki öğelerin blok (block) eksende nasıl hizalanacağını kontrol eder. Değerleri: start, end, center, stretch.place-items: align-items ve justify-items için bir kısaltmadır.justify-self: Tek bir grid öğesinin satır içi eksendeki hizalamasını, kapsayıcının justify-items değerini geçersiz kılarak ayarlar.align-self: Tek bir grid öğesinin blok eksendeki hizalamasını, kapsayıcının align-items değerini geçersiz kılarak ayarlar.place-self: align-self ve justify-self için bir kısaltmadır.
Pratik Kullanım Örnekleri
Metin Hizalama
text-align özelliği kullanılır.
.centered-text {
text-align: center;
color: #333;
font-size: 1.2em;
}
Blok Öğeyi Yatay Ortalamak
öğesini sayfa içinde yatay olarak ortalamak için
margin: auto kullanılır.
.centered-block {
width: 60%; /* Ortalamak için genişlik gerekli */
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center; /* İçindeki metni de ortalar */
}
Flexbox ile Öğeleri Ortalamak
Ortalanmış Öğe
.flex-container {
display: flex;
justify-content: center; /* Yatayda ortala */
align-items: center; /* Dikeyde ortala */
height: 200px; /* Kapsayıcıya yükseklik verilmeli */
background-color: #e0f2f7;
border: 1px solid #a7d9ed;
}
.flex-item {
padding: 15px 30px;
background-color: #007bff;
color: white;
font-weight: bold;
border-radius: 5px;
}
Grid ile Öğeleri Ortalamak
Ortalanmış Grid Öğe
.grid-container {
display: grid;
place-items: center; /* Hem yatay hem dikeyde ortalar */
height: 200px; /* Kapsayıcıya yükseklik verilmeli */
background-color: #e6ffe6;
border: 1px solid #b3e6b3;
}
.grid-item {
padding: 15px 30px;
background-color: #28a745;
color: white;
font-weight: bold;
border-radius: 5px;
}
Önemli Notlar
display özelliğine göre farklılık gösterir. Örneğin, text-align yalnızca blok seviyesi kapsayıcıların içindeki metin ve satır içi öğeler üzerinde etkilidir; bir blok öğeyi kendi başına ortalamaz.margin: auto; ile yatay olarak ortalamak için öğeye mutlaka bir genişlik (width) değeri atanmalıdır. Aksi takdirde, öğe tüm mevcut genişliği kaplayacak ve ortalanmayacaktır.vertical-align sadece satır içi öğeler veya tablo hücreleri için etkilidir. Blok öğeleri dikey olarak ortalamak için Flexbox, Grid veya mutlak konumlandırma (position: absolute; top: 50%; transform: translateY(-50%);) gibi modern teknikler tercih edilmelidir.flex-direction veya grid-template-columns/rows gibi özellikler, bu eksenlerin yönünü belirler ve dolayısıyla justify-content ve align-items'ın davranışını doğrudan etkiler.
Emin
3
0
Web tasarımında elementlerin yerleşimi ve düzeni, kullanıcı deneyimi açısından kritik bir öneme sahiptir. CSS'in display özelliği, elementlerin tarayıcı tarafından nasıl işleneceğini belirler. Bu özellik, yaygın olarak kullanılan block ve inline değerlerinin yanı sıra, bu ikisinin avantajlarını birleştiren inline-block değerini de sunar. Bu makalede, inline-block'un ne olduğunu, nasıl kullanıldığını ve web sayfalarınızda esnek düzenler oluşturmak için sunduğu faydaları detaylıca inceleyeceğiz.
Bir HTML elementine inline-block özelliklerini uygulamak için aşağıdaki CSS sözdizimi kullanılır:
.element-adi {
display: inline-block;
}CSS'te elementler genellikle ya block seviyesinde ya da inline seviyesinde davranır:
Bir Bir Aşağıdaki örnekler, Örnek 1: Temel Kutu Düzeni Üç adet Bu örnekte, her bir Örnek 2: Yatay Navigasyon Menüsü Bir navigasyon menüsündeki liste öğelerini ( Burada, Örnek 3: Form Elemanlarını Düzenleme Form etiketlerini ( Bu örnekte, etiketler ve giriş alanları yan yana gelmiş ve etiketlere belirli bir genişlik verilerek giriş alanlarının daha düzenli görünmesi sağlanmıştır. Boşluk Sorunu (Whitespace Issue): Dikey Hizalama ( Genişlik ve Yükseklik Kontrolü: Tarayıcı Uyumluluğu: Alternatif Düzen Modelleri: Karmaşık ve duyarlı (responsive) düzenler oluşturmak için block elementler: Tüm mevcut genişliği kaplar, yeni bir satırda başlar ve altındaki diğer elementleri de yeni bir satıra iter. Genişlik (width), yükseklik (height), üst/alt kenar boşluğu (margin-top, margin-bottom) ve dolgu (padding) değerleri uygulanabilir. Örnek: ,
, .
inline elementler: Sadece içeriği kadar yer kaplar, yeni bir satırda başlamaz ve diğer inline elementlerle aynı satırda yer alır. Genişlik ve yükseklik değerleri genellikle göz ardı edilir; üst/alt kenar boşluğu ve dolgu değerleri elementin düzenini etkilemez. Örnek: , , .
inline-block, bu iki davranışın en iyi yönlerini birleştirir:
inline element gibi diğer elementlerle aynı satırda yan yana durabilir.block element gibi genişlik (width), yükseklik (height), kenar boşluğu (margin) ve dolgu (padding) değerleri uygulanabilir.vertical-align özelliği ile dikey olarak hizalanabilir, bu da esnek düzenler oluşturmada büyük kolaylık sağlar.
Pratik Kullanım Örnekleri
inline-block'un farklı senaryolarda nasıl kullanılabileceğini göstermektedir.
div elementini yan yana konumlandırmak ve onlara belirli boyutlar vermek için inline-block kullanabiliriz.
Kutu 1
Kutu 2
Kutu 3/* CSS Kodu */
.kutu {
display: inline-block;
width: 150px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
line-height: 100px; /* İçeriği dikey ortalamak için */
}.kutu elementi hem yan yana dizilmiş hem de kendine ait genişlik, yükseklik ve kenar boşluklarına sahip olmuştur.
) yatay olarak hizalamak için inline-block sıklıkla tercih edilir.
/* CSS Kodu */
nav ul {
list-style: none; /* Liste işaretlerini kaldır */
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden; /* float kullanıldığında parent'ı temizlemek için */
}
nav li {
display: inline-block;
}
nav li a {
display: block; /* Bağlantının tüm li alanını kaplaması için */
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover {
background-color: #555;
} elementlerine display: inline-block; uygulanarak yan yana sıralanmaları sağlanmıştır. etiketine ise display: block; verilerek tıklanabilir alanın genişletilmesi ve padding uygulamasının doğru çalışması sağlanmıştır.
) ve giriş alanlarını () yan yana hizalamak için de inline-block kullanılabilir.
/* CSS Kodu */
.form-grup label {
display: inline-block;
width: 90px;
text-align: right;
margin-right: 10px;
}
.form-grup input {
display: inline-block;
padding: 5px;
margin-bottom: 10px;
}
Önemli Notlar ve İpuçları
inline-block elementler arasında HTML kodunda bırakılan boşluklar (satır sonları, boşluklar) tarayıcı tarafından küçük bir boşluk olarak yorumlanabilir. Bu istenmeyen boşlukları gidermek için CSS (font-size: 0; parent elementte, sonra çocukta tekrar ayarla), HTML (etiketleri birleştirme yorumları), veya nadiren margin-left: -4px; gibi teknikler kullanılabilir. Ancak modern yaklaşımlarda flexbox veya grid gibi alternatifler bu sorunu doğal olarak çözmektedir.vertical-align): inline-block elementler, inline elementler gibi davranarak vertical-align özelliği ile dikey olarak hizalanabilir. Bu, aynı satırdaki farklı yükseklikteki elementlerin üst, orta veya alt hizalanmasında oldukça kullanışlıdır.inline-block elementlere doğrudan width ve height değerleri atanabilir, bu da düzen kontrolünü önemli ölçüde artırır. Bu, inline elementlerde mümkün değildir.display: inline-block; özelliği oldukça eski bir özelliktir ve tüm modern tarayıcılar tarafından geniş çapta desteklenir. Bu nedenle, genel uyumluluk konusunda endişe etmenize gerek yoktur.inline-block hala geçerli bir seçenek olsa da, günümüzde flexbox ve CSS Grid gibi daha güçlü ve esnek düzen modelleri mevcuttur. Bu modern yaklaşımlar, özellikle boşluk sorunları gibi inline-block'un bazı sınırlamalarını aşar.
overflow özelliği, bu tür içerik taşmalarını yönetmek için güçlü bir mekanizma sunar. Bu özellik, bir elementin içeriği, belirtilen boyutlarından daha büyük olduğunda ne olacağını kontrol etmeyi sağlar. Doğru kullanıldığında, overflow özelliği web sayfalarının düzenini korurken kullanıcı deneyimini önemli ölçüde iyileştirebilir. Bu makale, overflow özelliğinin sözdizimini, değerlerini ve pratik kullanım senaryolarını detaylı bir şekilde inceleyecektir.overflow özelliği, bir elementin içeriğinin kutusunun dışına taştığı zaman ne olacağını belirler. Bu özellik hem yatay (overflow-x) hem de dikey (overflow-y) taşmaları ayrı ayrı kontrol etmek için kullanılabilir, veya kısa yol olarak overflow tek başına her iki yönü de aynı anda etkileyebilir.
selector {
overflow: visible | hidden | scroll | auto | initial | inherit;
overflow-x: visible | hidden | scroll | auto | initial | inherit; /* Yatay taşmayı kontrol eder */
overflow-y: visible | hidden | scroll | auto | initial | inherit; /* Dikey taşmayı kontrol eder */
}
overflow özelliğinin alabileceği anahtar kelime değerleri ve bunların anlamları aşağıda açıklanmıştır.visible: Varsayılan değerdir. İçerik, elementin kutusunun dışına taşsa bile görünür kalır. Bu durum, diğer elementlerin üzerine binebilir ve sayfa düzenini bozabilir.
hidden: İçeriğin elementin kutusunun dışına taşan kısımlarını gizler. Kullanıcı bu gizli içeriğe erişemez.
scroll: Hem yatay hem de dikey yönlerde kaydırma çubukları ekler, içerik taşsın veya taşmasın. Bu, her zaman kaydırma çubuklarının görünür olacağı anlamına gelir, bu da bazen görsel tutarsızlığa neden olabilir.
auto: Yalnızca içerik taştığında kaydırma çubuklarını ekler. Yatay veya dikey taşma varsa, ilgili kaydırma çubuğu görünür hale gelir. Bu genellikle en esnek ve kullanıcı dostu seçenektir.
overlay: scroll ile benzerdir ancak kaydırma çubukları içeriğin üzerine biner, bu da içeriğin boyutunu küçültmez. Modern tarayıcılarda bu genellikle auto ile aynı şekilde davranır, ancak eski tarayıcılarda farklılık gösterebilir.
initial: Özelliği varsayılan değerine ayarlar (visible).
inherit: Özelliği üst elementinden miras alır.
overflow özelliğinin farklı değerlerinin nasıl çalıştığını göstermektedir. Her örnekte, .container sınıfına sahip bir elementi, belirli bir genişlik ve yüksekliğe sahip olup, içine sığmayan uzun bir metin içerir.
Örnek 1: overflow: visible; (Varsayılan Davranış)
Bu örnekte, içerik elementin dışına taşacak ve görünür kalacaktır.
Bu metin, kabın belirlenen boyutlarından çok daha uzundur. overflow: visible; değeri nedeniyle, metin kabın dışına taşacak ve tamamen görünür kalacaktır. Bu, diğer sayfa elementleriyle çakışmalara neden olabilir ve genel düzeni bozabilir. Web sayfalarında bu varsayılan davranışı kontrol etmek önemlidir.
/* CSS Kodu */
.visible-example {
width: 200px;
height: 100px;
border: 2px solid #ccc;
overflow: visible; /* Varsayılan değer */
}
Örnek 2: overflow: hidden;
İçeriğin taşan kısımları gizlenecektir. Kullanıcı bu kısımları göremez veya erişemez.
/* CSS Kodu */
.hidden-example {
width: 200px;
height: 100px;
border: 2px solid #ccc;
overflow: hidden;
}
Örnek 3: overflow: scroll;
Taşma olsun olmasın, her zaman kaydırma çubukları görünecektir.
Bu metin, kabın belirlenen boyutlarından çok daha uzundur. overflow: scroll; değeri sayesinde, içeriğe erişmek için her zaman kaydırma çubukları görünecektir, içerik taşsa da taşmasa da. Hem yatay hem de dikey kaydırma çubukları her zaman mevcuttur. Bu, tutarlı bir kullanıcı arayüzü sağlayabilir ancak bazen gereksiz kaydırma çubuklarına yol açabilir.
/* CSS Kodu */
.scroll-example {
width: 200px;
height: 100px;
border: 2px solid #ccc;
overflow: scroll;
}
Örnek 4: overflow: auto;
Yalnızca içerik taştığında kaydırma çubukları görünecektir. Bu, genellikle en iyi uygulamadır.
Bu metin, kabın belirlenen boyutlarından çok daha uzundur. overflow: auto; değeri en esnek çözümü sunar; sadece içerik taştığında ilgili kaydırma çubukları (yatay veya dikey) görünür hale gelir. İçerik sığıyorsa, kaydırma çubukları görünmez. Bu, kullanıcı deneyimini optimize eder.
/* CSS Kodu */
.auto-example {
width: 200px;
height: 100px;
border: 2px solid #ccc;
overflow: auto;
}
Örnek 5: overflow-x ve overflow-y kullanımı
Bu örnekte, yatay taşma gizlenirken dikey taşma için kaydırma çubuğu eklenecektir.
Bu metin, özellikle yatayda çok uzun, dikeyde ise normalden biraz daha uzundur. overflow-x: hidden; ve overflow-y: scroll; değerleri ile yatay taşma gizlenecek, ancak dikey taşma için kaydırma çubuğu her zaman görünür olacaktır. Bu, farklı yönlerde farklı taşma davranışları gerektiğinde faydalıdır.
/* CSS Kodu */
.specific-example {
width: 150px;
height: 100px;
border: 2px solid #ccc;
white-space: nowrap; /* Metnin yatayda taşmasını sağlamak için */
overflow-x: hidden;
overflow-y: scroll;
}
Önemli Notlar
overflow özelliğini kullanırken, elemente mutlaka bir width veya max-width ile height veya max-height değeri atamanız önemlidir. Aksi takdirde, element içeriğine göre genişleyip daralacağı için taşma durumu oluşmayabilir.
overflow: hidden; kullanırken dikkatli olun. Önemli içeriğin kullanıcıdan gizlenmesine neden olabilir ve erişilebilirlik sorunları yaratabilir.
overflow: scroll; her zaman kaydırma çubukları göstereceği için, içeriğin taşmadığı durumlarda bile gereksiz görsel öğeler yaratabilir. Genellikle overflow: auto; daha iyi bir kullanıcı deneyimi sunar.
Satır içi elementler (overflow özelliği doğrudan uygulanamaz. Bu elementlerin display özelliği block, inline-block veya flex gibi bir değere ayarlanmalıdır.
position: absolute; veya position: fixed; ile konumlandırılmış alt elementler, üst elementlerinin overflow özelliğinden etkilenmeyebilir. Bu durum, taşma bağlamını (stacking context) anlamayı gerektirir.
Özellikle mobil cihazlarda kaydırma çubuklarının görünümü ve davranışı tarayıcılar arasında farklılık gösterebilir. Kaydırma çubuklarını özelleştirmek için tarayıcı önekli CSS özellikleri kullanılabilir (örneğin, Webkit tabanlı tarayıcılar için ::-webkit-scrollbar).
z-index özelliği, üç boyutlu bir düzen hissi yaratmada kritik bir rol oynar. Bu özellik, çakışan öğelerin hangi sırayla görüntüleneceğini belirleyerek görsel hiyerarşiyi yönetir.
z-index özelliği, bir öğenin yığılma sırasını belirlemek için bir tamsayı değeri alır.
element {
position: ; /* required */
z-index: | auto;
}
z-index özelliğinin doğru şekilde çalışabilmesi için, hedef öğenin mutlaka position özelliği değerinin static dışında (yani relative, absolute, fixed veya sticky) bir değere sahip olması gerekir. Aksi takdirde, z-index'in hiçbir etkisi olmayacaktır.
Değerler aşağıdaki gibidir:
1, 100, -5.
auto: Bu, öğenin yığılma sırasının ebeveyninin yığılma sırasıyla aynı olmasını sağlar. Bu, varsayılan değerdir ve yeni bir yığılma bağlamı oluşturmaz.
Aşağıdaki örnek, çakışan iki kutunun z-index kullanılarak nasıl sıralandığını göstermektedir. Kutulardan biri diğerinin üzerinde görünecektir.
Z-index Örneği
Kutu 1
Kutu 2
Yukarıdaki örnekte, .box2 sınıfına sahip öğe, z-index: 2; değeri sayesinde .box1 sınıfına sahip öğenin (z-index: 1;) üzerinde görüntülenecektir. Eğer z-index değerleri eşit olsaydı veya hiç belirtilmeseydi, HTML yapısındaki sıraya göre daha sonra gelen öğe daha üstte olurdu.
Negatif z-index kullanımı ile bir öğeyi diğer öğelerin veya arka planın arkasına yerleştirmek mümkündür. Bu, özellikle sabit başlıkların veya menülerin içeriğin arkasına geçmesi istenen durumlarda faydalıdır.
Negatif Z-index Örneği
Sabit Başlık (Z-index: -1)
Bu içerik, başlığın üzerinde görünecektir.
Aşağı kaydırarak başlığın içeriğin arkasına geçtiğini görebilirsiniz.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
position Gerekliliği: z-index özelliği yalnızca position değeri static olmayan (relative, absolute, fixed veya sticky) öğeler üzerinde etkilidir.
Yığılma Bağlamı (Stacking Context): Her z-index değeri, bir yığılma bağlamı içinde değerlendirilir. Bir öğe yeni bir yığılma bağlamı oluşturduğunda, onun içindeki tüm alt öğeler, ebeveynlerinin z-index değeri tarafından belirlenen o bağlam içinde sıralanır. Ebeveynin z-index değeri, alt öğelerin kendi aralarındaki sıralamadan önce gelir.
Yeni Yığılma Bağlamı Oluşturan Durumlar: position değeri static olmayan ve z-index değeri auto dışında olan öğeler yeni bir yığılma bağlamı oluşturur. Ayrıca, opacity değeri 1'den küçük olan, transform, filter, perspective gibi belirli CSS özelliklerini içeren öğeler de yeni yığılma bağlamları oluşturabilir.
Sıra Belirleme: Aynı yığılma bağlamında ve aynı z-index değerine sahip iki öğe arasında, HTML belgesinde daha sonra tanımlanan öğe görsel olarak daha üstte görünür.
Negatif Değerler: Negatif z-index değerleri, bir öğeyi genellikle varsayılan akıştaki öğelerin arkasına, hatta bazen body veya html arka planının arkasına bile yerleştirebilir. Ancak bu, tarayıcı ve diğer stillere bağlı olarak dikkatle kullanılmalıdır.
CSS'te elementlerin belge akışı içindeki yerleşimini ve görsel konumlandırmasını belirleyen temel özelliklerden biri position'dır. Bu özellik, geliştiricilere elementleri normal belge akışından çıkararak veya akış içinde belirli kurallara göre hareket ettirerek karmaşık düzenler oluşturma imkanı sunar. Web arayüzlerinde hassas kontrol sağlamak ve dinamik görsel efektler yaratmak için position özelliğinin farklı değerlerini anlamak esastır.
position özelliği, bir elementin konumlandırma türünü belirtmek için kullanılır. Aşağıdaki değerlerden birini alabilir:
position: static | relative | absolute | fixed | sticky;Her bir position değeri, elementin konumlandırma mantığını farklı şekillerde etkiler:
static: Bu, elementlerin varsayılan konumlandırma değeridir. Elementler, belgenin normal akışı içinde yer alır. top, right, bottom, left ve z-index özellikleri bu durumda hiçbir etki yaratmaz.
relative: Element, normal konumuna göre konumlandırılır. top, right, bottom veya left özellikleri kullanılarak normal konumundan uzaklaştırılabilir. Ancak, elementin orijinal konumu belgede hala yer kaplar ve diğer elementlerin yerleşimini etkiler.
absolute: Element, normal belge akışından çıkarılır ve en yakın konumlandırılmış (static olmayan) üst öğesine göre konumlandırılır. Eğer konumlandırılmış bir üst öğe yoksa, başlangıçtaki kapsayıcı bloğa (genellikle elementi) göre konumlanır. absolute konumlandırılmış bir element, diğer elementlerin yerleşimini etkilemez.
fixed: Element, tarayıcı penceresine (viewport) göre konumlandırılır. Sayfa kaydırılsa bile ekranın aynı yerinde kalır. absolute gibi, normal belge akışından çıkarılır ve diğer elementlerin yerleşimini etkilemez. Navigasyon çubukları veya "başa dön" butonları için idealdir.
sticky: Bu değer, relative ve fixed konumlandırmanın bir karışımıdır. Element, belirli bir kaydırma eşiğine ulaşana kadar relative olarak davranır, eşik aşıldığında ise fixed olarak davranmaya başlar. top, right, bottom veya left özelliklerinden en az biri belirtilmelidir.
Aşağıdaki örnekler, position özelliklerinin farklı kullanım senaryolarını göstermektedir.
Örnek 1: relative Kullanımı
Bu örnekte, bir kutu normal akışında konumlandırılır ancak left ve top değerleri ile hafifçe kaydırılır.
Relative Kutu
Örnek 2: absolute Kullanımı
Burada, iç kutu dış kutuya göre konumlandırılır ve sağ üst köşeye sabitlenir.
Absolute Kutu
Örnek 3: fixed Kullanımı
Bu örnek, sayfa kaydırılsa bile ekranın sağ alt köşesinde sabit kalan bir butonu gösterir.
Bu sayfa kaydırılabilen içerik içerir.
Aşağıya kaydırın ve fixed butonu görün.
Örnek 4: sticky Kullanımı
Bir başlık, belirli bir kaydırma noktasından sonra ekranın üst kısmına yapışık kalır.
Bu içerik sticky başlığın üzerindedir.
Aşağıya doğru kaydırın.
...
...
Yapışkan Başlık
...
...
...
...
Daha fazla içerik.
Yalnızca konumlandırılmış (static olmayan) elementler için z-index özelliği etki eder. z-index, elementlerin üst üste binme sırasını belirler.
absolute ve fixed konumlandırılmış elementler, normal belge akışından tamamen çıkarılır. Bu, diğer elementlerin onların varlığından habersizce yerleşeceği anlamına gelir.
relative konumlandırılmış bir element, normal akışta yer kaplamaya devam eder. Yalnızca görsel olarak kaydırılır.
sticky konumlandırmanın çalışabilmesi için top, right, bottom veya left özelliklerinden en az birinin tanımlanması gereklidir.
absolute konumlandırılmış bir elementin referans noktası, en yakın static olmayan üst elementidir. Bu üst elementin position özelliği relative, absolute, fixed veya sticky olmalıdır.
CSS'de max-width özelliği, bir elemanın genişliğinin belirli bir değeri asla aşmamasını sağlamak için kullanılır. Bu özellik, özellikle duyarlı web tasarımlarında, içeriğin farklı ekran boyutlarına uyum sağlaması ve taşma sorunlarını önlemesi açısından kritik bir rol oynar. Bir elemanın doğal genişliği ne olursa olsun, max-width tanımlanan değeri bir üst sınır olarak kabul eder ve elemanın genişliğinin bu sınırı geçmesine izin vermez. Bu sayede, elemanlar mevcut alanlarına dinamik olarak uyum sağlayabilirken, aşırı genişlemesi engellenir.
max-width özelliğinin temel sözdizimi aşağıdaki gibidir:
selector {
max-width: value;
}Yukarıdaki sözdiziminde yer alan bileşenler ve value için kullanılabilecek değerler aşağıda açıklanmıştır:
selector: Bu, CSS kuralının uygulanacağı HTML elemanını veya eleman grubunu hedefleyen bir CSS seçicisidir. Örneğin, .container, img veya #main-content olabilir.
max-width: Uygulanacak CSS özelliğidir.
value: Elemanın genişliğinin aşamayacağı maksimum değeri belirler. Aşağıdaki değer tiplerini alabilir:
length: Piksel (px), yüzde (%), em, rem, vw (viewport width) gibi mutlak veya göreceli uzunluk birimleri kullanılabilir. Örneğin, 600px, 80%, 50em.
none: Bu, max-width özelliğinin varsayılan değeridir. Elemanın maksimum genişlik sınırı yoktur; genişliği doğal içeriğine veya tanımlanmış width özelliğine göre belirlenir.
initial: Özelliği, tarayıcının varsayılan değerine ayarlar (genellikle none).
inherit: Elemanın max-width değerini doğrudan ebeveyn elemanından miras almasını sağlar.
Aşağıdaki örnekler, max-width özelliğinin farklı senaryolarda nasıl kullanılabileceğini göstermektedir.
Bu örnek, bir görselin kapsayıcısının genişliğini aşmamasını ve böylece duyarlı bir şekilde boyutlanmasını sağlar.
/* CSS Kodu */
.image-container {
width: 100%; /* Kapsayıcı tam genişlikte */
max-width: 800px; /* Kapsayıcının maksimum genişliği */
margin: 0 auto; /* Ortalamak için */
}
.image-container img {
max-width: 100%; /* Resim kapsayıcısının genişliğini aşmaz */
height: auto; /* Oranları korur */
display: block; /* Alt boşluğu kaldırmak için */
}Yukarıdaki CSS, Bir web sayfasının ana içerik alanının çok genişlemesini engelleyerek okunabilirliği artırmak için kullanılır. Bu, sayfanın ana içeriğidir. Geniş ekranlarda bile belirli bir genişliği aşmayarak okunabilirliği artırır. ... diğer içerikler ... Bu örnekte, Geniş form alanlarının küçük ekranlarda taşmasını önlerken, büyük ekranlarda da aşırı genişlemesini engeller. Burada, metin giriş alanları ve .image-container sınıfına sahip bir elemanının maksimum 800px genişliğe sahip olmasını sağlar. İçindeki 800px'ten daha geniş olmamasını garanti eder.
Örnek 2: İçerik Kapsayıcısını Sınırlama
/* CSS Kodu */
.main-content {
width: 90%; /* Kapsayıcı %90 genişlikte */
max-width: 1200px; /* Maksimum 1200 piksel genişlik */
margin: 0 auto; /* Ortalamak için */
padding: 20px;
background-color: #f0f0f0;
}.main-content sınıfına sahip eleman, ekran genişliğinin %90'ını kaplar, ancak asla 1200px'i aşmaz. Bu, içeriğin geniş ekranlarda bile çok yayılmamasını sağlayarak kullanıcı için daha rahat bir okuma deneyimi sunar.
Örnek 3: Form Elemanları İçin Kullanım
/* CSS Kodu */
input[type="text"],
textarea {
width: 100%; /* Eleman kapsayıcısının genişliğini doldurur */
max-width: 400px; /* Maksimum 400 piksel genişlik */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
box-sizing: border-box; /* Padding ve border'ı genişliğe dahil eder */
}