Bu makalede, HTML ve CSS'de overflow ve position özellikleri hakkında bilgi edineceksiniz Bu özellikler sayfa düzeni için çok önemlidir ve sayfaları daha güzel ve düzenli hale getirmemize yardımcı olurlar Overflow özelliği, içeriği belirli boyutlarda sığdırmak veya görünür kılmak için kullanılır Position özelliği ise elementleri sayfada istediğimiz yere yerleştirmemize izin verir Bu özelliklerin dört değeri vardır: relative, absolute, fixed ve sticky Daha sonra, bir tasarım örneği sunarak, bu özellikleri nasıl kullanabileceğinizi göstereceğiz Position özelliği, doğru kullanılmadığında düzen sorunlarına neden olabileceği için iyi bir planlama yapılması önerilir

Bu makalede, HTML ve CSS'de overflow ve position özelliklerinin nasıl kullanılabileceği ve varsayılan oluşturma yöntemleri hakkında bilgi edineceğiz. Her iki özellik de birbirine yakın çalışır ve sayfa düzeni için çok önemlidir.

Overflow özelliği belirlenen boyutlardan daha büyük içeriğe sahip elementleri nasıl sığdırabileceğimizi öğretirken, position özelliği elementleri sayfada istediğimiz yere yerleştirmeye izin verir. Bu iki özellikle, sayfaları daha güzel ve düzenlenmiş hale getirebiliriz.

Overflow ve position özelliklerinin nasıl kullanılabileceğini öğrendikten sonra, bu özelliklerin dört değerini de öğreniyoruz: Relative, absolute, fixed ve sticky. Bu dört değer, elementleri birbirine göre hareket ettirmek, konumlandırmak veya sabit tutmak gibi farklı amaçlar için kullanılabilir.

Daha sonra, bu özelliklerin kombinasyonunu kullanarak bir tasarım örneği sunuyoruz. Bu örnekte, sayfada farklı pozisyonlarda yer alan elementleri nasıl kullanabileceğimizi gösteriyoruz. Bu örnekle birlikte, sayfanın daha güzel ve düzenli görünmesine yardımcı olacak teknikleri öğrenebilirsiniz.

Sonuç olarak, bu makalede HTML ve CSS'de overflow ve position özelliklerinin nasıl kullanılabileceği ve varsayılan oluşturma yöntemleri hakkında bilgi edindik. Bu özellikler sayesinde, sayfalar daha düzenli hale gelebilir ve görsel olarak daha çekici hale getirilebilir.

Overflow Özelliği

Web sitelerinde içeriklerin, belirlenen boyutları aşması durumunda, sayfanın altında veya yan taraflarında kaydırma çubukları belirir. Bu durumda kullanıcının siteyi gezmesi zorlaşabilir ve sitenin kullanılabilirliği azalabilir. İşte bu noktada, overflow özelliği devreye girer.

Overflow özelliği, içeriği belirlenen boyutlarda tutmak yerine, içeriği sığdırmak için kullanılır. Bu sayede sayfada gezinme kolaylaşır ve kullanılabilirlik artar. Overflow özelliği, CSS'de varsayılan olarak visible değerine sahiptir. Ancak bu değeri hidden veya auto olarak değiştirebiliriz. Hidden değeri ile içeriği sadece belirlediğimiz boyutlarda gösterirken, auto değeri ile içerik ekrana sığdırılmaya çalışılır.

Position Özelliği

Position özelliği, elementleri sayfada istediğimiz yere yerleştirmemizi sağlayan bir CSS özelliğidir. Bu sayede elementlerimizi diğer içeriklerden bağımsız olarak belirlediğimiz bir konuma taşıyabiliriz.

Position özelliği, belirli değerlere sahiptir. Bunlardan ilki relative değeridir. Bu değer seçildiğinde, ilgili elementin orijinal pozisyonunu koruyarak, diğer elementlere göre hareket edebilmesi sağlanır. İkinci değer ise absolute değeridir. Bu değer ise ilgili elementin içinde yer aldığı üst elemente göre konumlandırılmasını sağlar. Üçüncü değer ise fixed değeridir. Fixed değeri, elementin ekranın üstünde kalmasını ve diğer elementlerden bağımsız olarak sabit bir pozisyonda kalmasını sağlar. Son olarak, sticky değeri elementlerin yarı yolda takılıp kalmamasını sağlayarak, sayfada sabit bir yere yapışmasını sağlar.

Position özelliği kullanılarak elementlerimizi sayfada istediğimiz gibi konumlandırabiliriz. Bu özelliği kullanarak, elementler arasındaki boşlukları veya açıklıkları da istediğimiz gibi ayarlayabiliriz. Bu sayede tasarımımızı daha estetik bir hale getirebiliriz.

Position Özelliğinin Değerleri

Position özelliği, elementleri sayfada istediğimiz yere yerleştirmemizi sağlayan bir CSS özelliğidir. Bu özelliğin kullanımı için 4 farklı position değeri mevcuttur: relative, absolute, fixed ve sticky.

• Relative: Bu değerde, elementin normal konumundan ötürü hareket ettirilebilir. Yani, elementin belirlenen pozisyonlardan birine göre konumlandırılabilmesi için diğer elementlerle olan ilişkisi değiştirilebilir.
• Absolute: Bu değerde, elementin konumlanacağı yeri, en yakın üst elementin göreceli pozisyonuna göre belirler. Eğer üst elementin göreceli pozisyonu mevcut değilse, sayfa gövdesine göre konumlandırılır.
• Fixed: Bu değerde, element ekranın üstünde sabit bir yerde kalır. Sayfa kaydırılırken, element sabit kalır ve diğer içeriğin üzerine örtülür.
• Sticky: Bu değerde, element ilk olarak normal pozisyonunda yer alır, ancak belirli bir kaydırma sınırına gelindiğinde sabitlenir ve diğer içeriğin üzerinde kalır.

Position özelliği, birçok farklı tasarım örneği oluşturmak için kullanılabilir. Ancak, doğru kullanılmadığında sayfa düzeninde büyük aksaklıklara neden olabilir. Bu nedenle, position özelliğinin kombinasyonlarının kullanımı öncesinde iyi bir planlama yapılması önerilir.

Relative Değeri

Relative position özelliği, elementi diğer elementlere göre hareket ettirmemizin yolunu açar. Böylece, sayfada yukarıdan aşağıya doğru daha fazla yer kaplayan veya diğer elementlerle çakışan bir elementin konumunu ayarlamak için kullanılabilir.

Bir elementin relative position özelliği, ana konumundan hareket eden yeni bir pozisyonda yer alır. Bu pozisyon, ana konuma göre belirli bir uzunluk veya genişlikte kaydırma yapabiliyor olabilmesi anlamına gelir.

Bir başka deyişle, relative position özelliği bir elementin ana konumunda belirlenmiş değeri değiştirir. Örneğin, bir görselin konumu için belirlediğimiz değerleri, yeniden ayarlamak istediğimizde relative position özelliğini kullanabiliriz.

Relative position özelliği kullanırken, left, right, top, bottom şeklinde tanımlanmış değerler ve pixel ya da yüzde türünde verilen birimler kullanılır. Bu sayede, elementlerimizi birbirine göre hareket ettirebiliriz.

Bir örnek vermek gerekirse, bir menü listemizin içerisindeki elementlerin birbirine göre hareket etmesi istendiği zaman relative position özelliğinden yararlanarak her elementin pozisyonu belirlenebilir. Bu sayede, listemizin her elemanını yukarı veya aşağı kaydırabiliriz.

Bununla birlikte, relative position özelliği, elementin orijinal konumunu bozan diğer etkilere sahip olabilir. Bu nedenle, relative position özelliği yalnızca küçük değişiklikler yapmak amaçlı kullanılmalıdır.

Absolute Değeri

Absolute position, bir elementin içinde yer aldığı üst elemente göre konumlanmasını sağlar. Bu özellik, elementin konumunu göreceli olarak belirlemek yerine, belirli bir üst elemente göre konumlandırılması için kullanılır.

Bir elementin konumu, en yakın pozisyon özelliği belirtilmiş olan üst elemente göre belirlenir. Eğer üst elementin pozisyon özelliği belirtilmemişse, en dışa doğru olan elementin konumuna göre belirlenir.

Bu özellik kullanıldığında, elementin konumu diğer elementlerden bağımsız olarak belirlenir ve sayfa içinde sabit bir şekilde konumlandırılır. Absolute position özelliğinin doğru bir şekilde kullanımı, sayfanın daha iyi bir şekilde düzenlenmesine ve kullanıcı deneyiminin artırılmasına yardımcı olabilir.

Fixed Değeri

Fixed position özelliği, bir elementin ekranın üstünde sabit kalmasını sağlar. Bu özellik, özellikle menü çubuklarında veya uyarı bildirimlerinde sıkça kullanılır. Bir elementi fixed konumuna getirmek için, CSS kodlarında "position: fixed;" ifadesini kullanabilirsiniz.

Fixed position özelliğinde, elementin pozisyonu, tarayıcının en üst noktasına göre belirlenir. Bu nedenle, element tarayıcının kaydırılmasına rağmen sabit kalacaktır. Bu özellik, elementin takip edilmesini istediğimiz durumlarda kullanışlıdır. Ayrıca, fixed position özelliği kullanılarak ekranın üstünde sabit kalan bir reklam bannerı veya menü barı oluşturulabilir.

Bu özelliğin kullanımı dikkatli seçilmelidir çünkü ekranın üstünde sabit kalan bir element, kullanıcının sayfayı görememesine ve kullanıcı deneyimini olumsuz yönde etkilemesine neden olabilir. Bu nedenle, fixed position özelliği, gerekli olduğu zamanlarda kullanılmalıdır.

Sticky Değeri

Sticky position özelliği, elementlerin yarı yolda takılıp kalmaması için kullanılır. Bu özellik ile belirlenen yerlere sabitlenmiş elementler oluşturulabilir. Sticky özelliği, relative ve fixed özelliklerinin birleşimi olarak düşünülebilir.

Element, belirli bir konuma gelene kadar normalden farklı bir konumda tutulabilir ve daha sonra sabitlenebilir. Bu yöntemle genellikle menüler, başlıklar ve benzeri öğelerin sabitlenmesi için kullanılır. Böylece kullanıcılar sayfanın yukarısına inerken, sabitlenen öğelerin kaybolması engellenmiş olur. Sticky özelliği, sık kullanılan bir özellik olmasa da, kullanıldığı takdirde oldukça faydalıdır.

Dört Özellik Kombinasyonu İle Tasarım Örneği

Overflow ve position özelliklerinin kullanımı, web sayfalarında yapılan tasarımların daha özgün ve kullanışlı olmasını sağlamaktadır. Bu konuda birçok farklı kombinasyon yapılabilmektedir. Biz de bu makalede, 4 farklı position değeri kullanarak bir tasarım örneği sunacağız.

Örneğimizde, bir website başlığı için tasarım yapacağız. İlk olarak, başlığın tam ortasındaki bir resim için position özelliğinde relative ve left değerlerinin kullanımına yer vereceğiz. Bu sayede, resim dikey ve yatay olarak konumlandırılmış olacaktır. Ardından, başlığın üst kısmında yer alan menüleri position özelliğinde absolute değeri kullanarak üst elemente göre konumlandıracağız.

Mobil cihazlarda görüntülenecek olan resmin ve menülerin tasarımı ise, overflow özelliğini kullanarak sağlanacaktır. Bu sayede, içerikler ekrana sığdırılarak kaydırma işlemi gerektirmez. Ayrıca, sticky position özelliği kullanılarak scroll yapılırken başlık daima üstte kalacaktır.

Tasarımda kullanılan kombinasyonlar hem kullanışlılığı hem de estetik açıdan başarılı bir sonuç verirken, daha farklı fikirlerle de bu özelliklerin birlikte kullanılabileceği ortaya çıkmaktadır.

Özet

Bu makalede, HTML ve CSS'de kullanılan overflow ve position özellikleri ile varsayılan oluşturma yöntemleri ele alınmıştır. Overflow özelliği ile belirlenen boyutların dışında kalan içeriklere sayfanın kaydırılmasına gerek kalmadan nasıl yer verilebileceği öğrenilirken, position özelliği ile elementlerin sayfada istenilen konuma nasıl yerleştirileceği açıklanmıştır. Relative, absolute, fixed ve sticky değerleri ile position özelliğinin farklı kullanımları ve elementlerin hareketleri anlatılmıştır.

Ayrıca, overflow ve position özelliklerinin bir arada kullanımından oluşan dört farklı position değeri örneği sunulmuştur. Bu kombinasyonlar ile birlikte HTML ve CSS'de tasarımın nasıl şekillendirilebileceği öğrenilmiştir. Makalemiz, bu özelliklerin doğru kullanımı ile birlikte ortaya çıkan varsayılan oluşturma yöntemlerini anlatarak, okuyuculara bu konuda bilgi sahibi olmalarını sağlamaktadır.