CSS position tanımı
İçindekiler
CSS Position Tanımı
CSS position özelliği, bir HTML elementinin yerini belirlemek için kullanılan bir özelliktir. Bu özellik sayesinde bir elementin diğer elementlere göre nasıl konumlanacağı belirlenebilir. Position özelliği, 5 farklı değer alabilir: static, relative, absolute, fixed, ve sticky.
1. Static Pozisyon
Static pozisyon, bir elementin varsayılan pozisyonudur. Eğer bir elementin position özelliği belirtilmediyse veya static olarak belirtildiyse, element normal akışta yer alır ve diğer elementlerin konumunu etkilemez.
2. Relative Pozisyon
Relative pozisyon, elementin normal akışta yer almasını sağlar, ancak pozisyon değerleri kullanılarak konumunun ayarlanmasına olanak tanır. Yani relative pozisyon verilen bir element, diğer elementlere göre konumunu değiştirebilir, ancak normal akışta yer alır.
3. Absolute Pozisyon
Absolute pozisyon, bir elementi normal akıştan çıkarır ve onu en yakın konumlu relative veya absolute pozisyondaki üst elemente göre konumlandırır. Bu sayede, bir elementin tam istenilen konumda yer almasını sağlar. Absolute pozisyon verilen bir element, diğer elementlerden bağımsız olarak konumunu değiştirebilir.
İletişim kuralı: box model
Web tasarımı yaparken, elementlerin diğer elementlerle nasıl iletişim kurduğunu anlamak çok önemlidir. Bu iletişimi sağlamak için kullanılan temel prensiplerden biri de “box model”dir. Box model, bir HTML elementinin iç içe geçmiş bir kutu hâlinde düşünülmesine dayanır. Bu kutunun dört farklı bileşeni vardır: içerik (content), kenarlık (border), dolgu (padding) ve boşluk (margin). Bu dört bileşen elementin boyutunu ve konumunu belirler ve diğer elementlerle olan ilişkisini şekillendirir.
İlk bileşen olan içerik (content), elementin gerçek içeriğini temsil eder. Metin, resim veya diğer medya içerikleri bu bileşenin içerisinde yer alır. İçeriğin boyutu, genellikle piksel (px) veya yüzdelik (%) olarak belirlenir.
Kenarlık (border), elementin çevresini çizen bir çerçeve olarak düşünülebilir. Bu çerçeve, elementin etrafına katman ekler ve onu diğer elementlerden ayırır. Kenarlık genişliği, rengi ve stili gibi özellikler belirlenebilir.
- Dolgu (padding): Dolgu, içerik ile kenarlık arasındaki boşluğu temsil eder. Elementin içeriğinin etrafında bir tampon bölgesi oluşturur. Dolgu miktarı, piksel veya yüzdelik olarak belirlenebilir.
- Boşluk (margin): Boşluk, elementin diğer elementlerden olan uzaklığını belirler. Yani elementin çevresinde bir boşluk bırakır. Boşluk miktarı da piksel veya yüzdelik olarak belirtilebilir.
Box model, web tasarımında elementlerin birbirleriyle etkileşimini belirlemek için kullanılan önemli bir araçtır. Bu sayede elementlerin boyutları, kenarlık ve dolgu gibi özellikleri daha iyi yönetilebilir. Box modelin doğru bir şekilde anlaşılması ve kullanılması, web tasarımda profesyonel bir görünüm elde etmek için önemlidir.
| Bileşen | Görevi |
|---|---|
| İçerik (content) | Elementin gerçek içeriğini temsil eder |
| Kenarlık (border) | Elementin çevresine bir çerçeve ekler |
| Dolgu (padding) | İçerik ile kenarlık arasındaki boşluğu oluşturur |
| Boşluk (margin) | Elementin diğer elementlerden olan uzaklığını belirler |
Static pozisyon
Statik Pozisyon
CSS’te statik pozisyon, bir öğenin varsayılan konumlandırma davranışını temsil eder. Bir öğe statik pozisyonda olduğunda, herhangi bir konumlandırma ayarı yapılmamış demektir.
Statik pozisyonda olan bir öğe, belgenin normal akışında yer alır ve diğer öğelerle çakışmaz. Öğenin konumu, dokümandaki yerleşimine bağlı olarak belirlenir. Bu pozisyon, diğer pozisyon türleri tarafından geçersiz kılınabilir.
Relative pozisyon
Relative pozisyon, CSS’deki bir pozisyonlama özelliğidir. Bir öğenin orijinal pozisyonunu değiştirmeden diğer öğelerin ona göre konumlandırılmasını sağlar. Bu pozisyonlama türü, öğenin diğer öğelerle ilişkisine göre yerini ayarlamak için kullanılır.
Bir öğeye relative pozisyon vermek için CSS’de position: relative; ifadesini kullanırız. Bu özellik tanımlandığında, öğe hala normal akış içinde kalır, yani diğer öğeleri etkilemez. Ancak, top, right, bottom, veya left özellikleri ile belirtilen değerlerle öğenin mevcut konumuna bağlı olarak hareket edebilir.
Relative pozisyon, genellikle diğer pozisyon değerleriyle birlikte kullanılarak daha karmaşık yerleşimler oluşturmak için kullanılır. Örneğin, bir öğeyi sayfanın sol üst köşesine yerleştirdikten sonra, bu öğeyi relative pozisyonla biraz aşağı veya sağa kaydırabiliriz.
Bu pozisyonlama türü ayrıca, bir öğeyi içerisinde bulunduğu parent öğeye göre konumlandırmak için de kullanılabilir. Eğer bir öğeye relative pozisyon verilerek top, right, bottom, veya left özellikleri belirtilmezse, bu değerler varsayılan olarak 0 kabul edilir ve öğe parent öğesine göre sağa yapışık olarak konumlandırılır.
- Relative pozisyon özelliği, bir öğenin orijinal pozisyonunu değiştirmeden diğer öğelerle ilişkisine göre konumlandırılmasına olanak sağlar.
- position: relative; ifadesi ile bir öğeye relative pozisyon verilebilir.
- Bir öğe relative pozisyon aldığında, top, right, bottom, veya left özellikleri kullanılarak hareket ettirilebilir.
- Relative pozisyon, diğer pozisyon değerleriyle birlikte kullanılarak daha karmaşık yerleşimler oluşturmak için idealdir.
- Bir öğe relative pozisyon aldığında, varsayılan olarak 0 kabul edilen top, right, bottom, veya left değerleri ile parent öğesine göre sağa yapışık olarak konumlandırılır.
| Özellik | Açıklama |
|---|---|
| top | Öğeyi yukarıya doğru hareket ettirme miktarını belirtir. |
| right | Öğeyi sağa doğru hareket ettirme miktarını belirtir. |
| bottom | Öğeyi aşağıya doğru hareket ettirme miktarını belirtir. |
| left | Öğeyi sola doğru hareket ettirme miktarını belirtir. |
Absolute pozisyon
Konumu belirlemek, HTML ve CSS kullanarak web sayfalarını düzenlemek için önemlidir. CSS’in bir özelliği olan pozisyon, web sayfalarındaki öğelerin nasıl yerleştirileceğini kontrol etmek için kullanılır. Absolute pozisyon, bu pozisyon özelliğinin en belirleyici olanıdır. Absolute pozisyon, bir öğeyi diğer öğelerden bağımsız olarak yerleştirmek için kullanılır.
Absolute pozisyonun belirlenmesi, position: absolute; stil özelliğinin kullanılmasıyla yapılır. Bu şekilde, öğe belirlenen top, right, bottom veya left özelliklerine göre yerleştirilir. Öğenin tam pozisyonunu belirtmek için bu özelliklerden en az biri kullanılmalıdır.
Absolute pozisyon, öğenin içinde bulunduğu herhangi bir sarma öğesine göre konumlanmaz. Bu, öğenin sayfadaki konumunu etkiler ve diğer öğelerin üzerine yerleştirilebilir. Diğer öğelerle hiçbir çakışma olmaz ve bu nedenle öğenin tam konumunu belirlemek kolaydır.
- Absolute pozisyon, web sayfalarında menülerin veya bildirimlerin üstüne ekran boyunca yerleştirilmesi gereken öğeleri yerleştirmek için idealdir.
- Öğenin konumu, ekranın sol üst köşesinden itibaren belirlendiği için sayfanın genel akışını etkilemez.
- Absolute pozisyon, diğer öğelerle çakışmadığından, öğenin üzerine eklenen içeriğin içeriği bozulmadan görüntülenmesini sağlar.
Absolute Pozisyon Örneği
Aşağıdaki örnek, bir metin kutusunun sayfanın sağ üst köşesine yerleştirilmesini göstermektedir:
| HTML Kodu | CSS Kodu |
|---|---|
| <div id=”metin-kutusu”> <p>Bu metin kutusu absolute pozisyon ile yerleştirildi.</p></div> | #metin-kutusu { position: absolute; top: 0; right: 0; padding: 10px;} |
Yukarıdaki HTML ve CSS kodu, “metin-kutusu” isimli bir div öğesine absolute pozisyonun nasıl uygulanacağını göstermektedir. CSS kodundaki “top: 0” ve “right: 0” özellikleri, metin kutusunu sayfanın sağ üst köşesine yerleştirir.
Fixed pozisyon
Fixed Pozisyon
HTML ve CSS kullanarak web siteleri oluştururken, bazen belirli bir öğenin sabit bir konumda kalmasını isteyebiliriz. İşte bu durumda fixed (sabit) pozisyon kullanılır. Fixed pozisyon, belirlenen öğenin üst, alt, sol veya sağ kenara göre sabitlenmesini sağlar. Bu, kullanıcı sayfasını ne kadar kaydırırsa kaydırsın, öğenin ekranın aynı konumunda kalmasını sağlar.
Aşağıda bir örnek tabloya bakalım:
| Öğeler | Açıklama |
|---|---|
| position: fixed; | Öğenin sabitlenmiş bir pozisyonda kalmasını sağlar. |
| top: değer | Öğenin üst kenara olan uzaklığını belirler. |
| right: değer | Öğenin sağ kenara olan uzaklığını belirler. |
| bottom: değer | Öğenin alt kenara olan uzaklığını belirler. |
| left: değer | Öğenin sol kenara olan uzaklığını belirler. |
Sticky pozisyon
Sticky Pozisyon
Web tasarımında sticky pozisyon, elemanların belirli bir konuma sabitlenmesini sağlayan bir CSS özelliğidir. Sticky pozisyon, bir elemanın scroll edildiğinde ekranın dışına çıkmadan belirli bir konumda kalmasını sağlar. Bu özellik, kullanıcıların siteyi rahatça gezinmesini sağlamanın yanı sıra, önemli bilgilerin her zaman görünür olmasını sağlar.
Bir elemana sticky pozisyonunu uygulamak için CSS’de position: sticky; özelliği kullanılır. Bu pozisyon değeri, elemanın normal akışından çıkararak belirtilen konumda kalmasını sağlar. Sticky pozisyonu verilecek elemanın bir üst öğeye göre top, right, bottom veya left özellikleriyle konumu belirlenir.
Sticky pozisyon, kullanıcı deneyimini geliştirmek ve önemli bilgileri vurgulamak için sıklıkla kullanılır. Örneğin, bir menüyü ya da iletişim bilgilerini sayfanın üstünde her zaman görünür kılmak için sticky pozisyon tercih edilebilir. Bu, kullanıcıların kolaylıkla erişebileceği bilgilere ulaşmasını sağlar ve site kullanılabilirliğini artırır.
Sık Sorulan Sorular
CSS position tanımı nedir?
CSS position, bir HTML öğesinin yerleştirme yöntemini belirlemek için kullanılan bir özelliktir. Bu özelliği kullanarak öğelerin sayfa üzerinde nasıl konumlandırılacağını kontrol edebilirsiniz.
İletişim kuralı nedir?
İletişim kuralı (box model), bir HTML öğesinin genişliği, yüksekliği, dolayısıyla da kenar boşluklarını ve dış marjları belirleyen bir kavramdır. Bu kurala göre, öğenin içeriği, kenar boşlukları ve dış marjlar kadar alan kaplar.
Static pozisyon nedir?
Static pozisyon, bir HTML öğesinin varsayılan konumlandırma yöntemi olarak kabul edilir. Bu pozisyonda öğeler, belgenin akışı içinde normal bir şekilde yer alır ve diğer öğelerin üzerine bindirilmez.
Relative pozisyon nedir?
Relative pozisyon, bir HTML öğesinin normal akışa göre konumunu ayarlamak için kullanılan bir pozisyon türüdür. Bu pozisyonda öğe, belge içindeki orijinal konumuna göre hareket edebilir, ancak diğer öğelerin konumları bundan etkilenmez.
Absolute pozisyon nedir?
Absolute pozisyon, bir HTML öğesini belgedeki bir konuma sabitlemek için kullanılan bir pozisyon türüdür. Bu pozisyonda öğe, belgenin akışından bağımsız olarak belirli bir konumda yer alır. Diğer öğeler üzerinde gezinerek yerleştirilebilir.
Fixed pozisyon nedir?
Fixed pozisyon, bir HTML öğesini görünümün sabit bir bölgesine yerleştirmek için kullanılan bir pozisyon türüdür. Bu pozisyonda öğe, belgenin geri kalanı kaydırılsa bile belirli bir konumda kalır ve diğer öğelerin üzerine bindirilebilir.
Sticky pozisyon nedir?
Sticky pozisyon, bir HTML öğesini belirli bir kaydırma konumunda sabitlemek için kullanılan bir pozisyon türüdür. Bu pozisyonda öğe, belirli bir pozisyonun üzerine scroll edildiğinde sabitlenir ve diğer öğelerin üzerinde hareket edebilir.