Kurs Takvimi

CSS İleri Dersler

• CSS Ders Kitabı
• CSS Tanıtımı
• CSS Temel Gramer
• CSS İleri Gramer
• CSS Çıkarma Seçicileri
• CSS id Seçicisi
• CSS Sınıf Seçicisi
• CSS Oluşturma
• CSS Arka Plan
• CSS Metin
• CSS Yazı Tipi
• CSS Listeler

CSS Çerçeve Modeli

• CSS Kutu Modeli Özeti
• CSS İç Kenar Boşluğu
• CSS Kenar
• CSS Kenar Boşluğu
• CSS Kenar Boşluğu Birleşimi

CSS Konumlandırma

• CSS Konum Özeti
• CSS Göreceli Konum
• CSS Mutlak Konum
• CSS Yükleme

CSS Seçici

• CSS Element Seçicisi
• CSS Seçici Gruplama
• CSS Sınıf Seçicisi Ayrıntısı
• CSS ID Seçicisi Ayrıntısı
• CSS Özellik Seçicisi Ayrıntısı
• CSS Çocuk Seçicisi
• CSS Alt Element Seçicisi
• CSS Komşu Kardeş Seçicisi

Seçmeli Dersler

Kurs Önerileri:

• CodeW3C.com Cep Sözlüğü

CSS Konumlandırma (Positioning) özelliği, elementlere konumlandırma yapmanızı sağlar.

CSS Konumlandırma ve Yükleme

CSS, konumlandırma ve yükleme için bazı özellikler sağlar, bu özellikler kullanılarak sütun düzeni oluşturulabilir, düzenin bir kısmı diğer kısmına yığılabilir ve yıllardır genellikle birden fazla tablo kullanılarak tamamlanan görevler de gerçekleştirilebilir.

Konumlandırma temel思想很简单， bu, element çerçevesinin normal konumuna göre veya ebeveyn elemente, diğer bir elemente hatta tarayıcı penceresi kendisine göre olması gereken konumu tanımanızı sağlar. Bu fonksiyon çok güçlü ve de şaşırtıcı. Kullanıcı aracının CSS2'de konumlandırma desteği, diğer yönlerden çok daha fazla, bu da şaşırtıcı olmamalı.

Diğer yandan, CSS1'de ilk kez yükleme önerildi, bu özellik, Web'in gelişim başlangıcında Netscape tarafından eklenen bir fonksiyonun temelinde yer alıyor. Yükleme tamamen konumlandırma değil, tabii ki normal akış düzeni de değil. Yüklemenin anlamını sonraki bölümlerde açıklayacağız.

Her şey çerçeve

div, h1 veya p elementleri genellikle blok elementleri olarak adlandırılır. Bu, bu elementlerin blok olarak görüntülendiği anlamına gelir.Bir içerik parçasıyani 'blok çerçevesi'. Buna karşıtlıkla, span ve strong gibi elementler 'satır içi elementler' olarak adlandırılır, çünkü içerikleri 'satır içi çerçeve' olarak görüntülenir.

Kullanabilirsiniz display özniteliğiOluşturulan çerçeve türünü değiştirmek. Bu, display özniteliğini block olarak ayarlayarak satır içi elementleri (örneğin <a> elementi) blok elementleri gibi davranmasını sağlar. Ayrıca, display'ı none olarak ayarlayarak oluşturulan elementin hiçbir çerçevesinin olmadığını ve bu çerçeve ile tüm içeriğin görüntülenmemesi ve belge içinde yer kaplamamasını sağlar.

Ancak, belirli bir tanımlama yapılmamış bir durumda, blok elementler oluşturulabilir. Bu durum, bazı metinleri bir blok elementi (örneğin div) başına eklemek olduğunda ortaya çıkar. Bu metinleri paragraf olarak tanımlamamış olsanız bile, onlar paragraf olarak davranır:

<div>
some text
<p>Some more text.</p>
</div>

Bu durumda, bu çerçeve isimsiz blok çerçevesi olarak adlandırılır, çünkü özel olarak tanımlanmış bir elementle ilişkilendirilmez.

Blok elementlerin metin satırları da benzer bir durum yaşar. Bir üç satırlık metin içeren bir paragrafın varsayılan örneğini alın. Her satır metni bir isimsiz çerçeve oluşturur. Isimsiz blok veya satır çerçevelerine doğrudan stil uygulanamaz, çünkü stil uygulanacak bir yer yok (dikkat edin, satır çerçevesi ve satır içi çerçevesi iki farklı kavramdır). Ancak, bu, ekranın üzerinde gördüğünüz her şeyin belirli bir çerçeve oluşturduğunu anlamamıza yardımcı olur.

CSS Konumlandırma Mekanizması

CSS üç temel konumlandırma mekanizması vardır: normal akış, yükleme ve mutlak konumlandırma.

Özellikle belirtilmemişse, tüm çerçeveler normal akışta konumlandırılır. Yani, normal akıştaki elementlerin konumu, elementin (X)HTML'deki konumuna göre belirlenir.

Blok çerçeveler yukarıdan aşağıya bir birine yerleştirilir, çerçeveler arasındaki dikey mesafe, çerçevelerin dikey dış kenar boşluğu ile hesaplanır.

Satır içi çerçeveler bir satırda yatay olarak düzenlenir. Yatay iç kenar boşluğu, çerçeve ve dış kenar boşluğu ile aralarını ayarlayabilirsiniz. Ancak, dikey iç kenar boşluğu, çerçeve ve dış kenar boşluğu, satır içi çerçevenin yüksekliğini etkilemez. Bir satır tarafından oluşturulan yatay çerçeveSatır çerçevesi (Line Box)Satır çerçevesinin yüksekliği, içerdiği tüm satır içi çerçeveleri içine almak için yeterli olur. Ancak, satır yüksekliğini ayarlamak bu çerçevenin yüksekliğini artırabilir.

Aşağıdaki bölümlerde, size göreceli konumlandırma, mutlak konumlandırma ve yükleme hakkında ayrıntılı olarak anlatacağız.

CSS position Özelliği

kullanarak position özniteliği4 farklı türde konumlandırma seçebiliriz, bu da element çerçevesi oluşturma yöntemini etkiler.

position özniteliğinin anlamı:

static

Öğe çerçevesi normal olarak oluşturulur. Blok elementler, belge akışının bir parçası olarak bir daire çerçevesi oluşturur, satır içi elementler ise ebeveyn elementlerinde bir veya daha fazla satır çerçevesi oluşturur.

relative

Element çerçevesi belirli bir mesafeye kaydırılır. Element, konumlandırılmadan önceki şeklini korur ve kendi alanını korur.

absolute

Element çerçevesi tamamen belge akışından çıkarılır ve içeren bloğa göre konumlandırılır. İçeren blok, belgedeki başka bir element veya başlangıç içeren bloğu olabilir. Elementin normal belge akışında yer aldığı alan kapanır, yani elementin yokmuş gibi davranır. Element konumlandırıldıktan sonra, normal akışta oluşturduğu türden herhangi bir blok oluşturur.

fixed

Element çerçevesi, position özelliğini absolute olarak ayarlandığında benzer bir performans gösterir, ancak içeren blok kendi penceresidir.

İpucu:Relative konumlandırma, elementin normal akış konumuna göre konumlandırıldığı için, genellikle normal akış konumlandırma modelinin bir parçası olarak düşünülür.

CSS Konum Özellikleri

CSS Konum Özellikleri, elementleri konumlandırmak için izin verir.

Araç Çuvalı

CSS Referans Kılavuzu

CSS Örnekleri

CSS Testleri

CSS Eğitimi

Sponsor Bağlantıları