Overflow ve Position İle Varsayılan Oluşturma ()

Adı : Overflow ve Position İle Varsayılan Oluşturma ()

Overflow ve Position CSS özellikleri, web sayfalarında öğelerin konumlandırılması ve düzenlenmesi için kullanılan önemli araçlardır. Bu yazıda, Overflow ve Position özelliklerinin ne olduğunu, nasıl kullanıldığını ve örneklerle nasıl uygulandığını ayrıntılı bir şekilde açıklayacağım.

Overflow, bir ögenin içerisindeki içeriğin sığmadığı durumlarda ne yapılacağını belirlemek için kullanılan bir CSS özelliğidir. Örneğin, bir div ögesinin içinde çok fazla metin bulunuyorsa ve div'in boyutları sınırlı ise, içerik genellikle taşar ve sayfa üzerinde istenmeyen bir sonuç oluşur. Bu durumda overflow özelliği kullanarak, taşan içeriğin nasıl görüntüleneceğini kontrol edebiliriz.

Overflow özelliği, dört farklı değeri kabul eder: visible, hidden, scroll ve auto.

- Visible değeri, ögenin dışına taşan içeriğin gösterilmesini sağlar. Bu, genellikle varsayılan değerdir ve belirtilmezse kullanılır.

- Hidden değeri, ögenin dışına taşan içeriğin görünmemesini sağlar. Taşan içerik görünmez hale gelir.

- Scroll değeri, ögenin içeriği taşsa bile kaydırma çubuklarının görüntülenmesini sağlar. Bu değer kullanıldığında, taşan içeriği görmek için kaydırma yapılabilecektir.

- Auto değeri ise, içeriğin taşması durumunda ögenin nasıl davranacağını otomatik olarak belirler. Eğer içerik taşıyorsa, otomatik olarak kaydırma çubuklarını gösterir.

Örnek olarak, aşağıdaki div ögesinin içerisinde çok fazla metin olduğunu ve taşmaya başladığını düşünelim:

```html

```

Bu örnekte, div'in boyutları belirli olduğu için içerik taşmaktadır. Overflow özelliği auto olarak ayarlandığı için otomatik olarak kaydırma çubukları görüntülenecektir. Kullanıcı içerikten fazlasını görmek için kaydırma yapabilecektir.

Position ise, öğelerin bir sayfa içinde nasıl konumlandırılacağını belirlemek için kullanılan bir CSS özelliğidir. Position özelliği, beş farklı değer kabul eder: static, relative, fixed, absolute ve sticky.

- Static değeri, bir ögenin yerleştirilme yöntemini belirtmez ve varsayılan değerdir. Static değeri kullanılan bir öge, normal belge akışında yer alır ve position özelliğinin diğer değerleri kullanılmaz.

- Relative değeri, bir ögenin normal belge akışında yer almasını sağlar. Ancak, relative değere sahip bir öge için top, right, bottom ve left özellikleri kullanılarak pozisyonu ayarlanabilir.

- Fixed değeri, bir ögenin sayfaya göre tanımlanmış bir konumda sabitlenmesini sağlar. Sabitlenen bir öge, kullanıcı sayfayı kaydırırken bile konumunu korur.

- Absolute değeri, bir ögenin diğer ögelerle ilişkisiz olarak önceden tanımlanmış bir konumda yer almasını sağlar. Bir ögeye absolute değeri verildiğinde, en yakın position özelliği relative, fixed veya absolute olan üst ögeye göre konumlanır.

- Sticky değeri ise, bir ögenin sayfaya göre tanımlanmış bir konumda kalmasını sağlar. Ancak, kullanıcı sayfayı kaydırdığında sticky ögenin konumu değişebilir.

Örneğin, aşağıdaki örnekte, bir ögenin position değeri relative olarak ayarlanmıştır ve top ve left özellikleriyle konumu belirlenmiştir:

```html

```

Bu örnekte, div ögesi normal belge akışında yer alırken, position değeri relative olarak ayarlandığı için 20px aşağı ve 30px sağa kaydırılmıştır.

Sık Sorulan Sorular:

S1- Overflow özelliği nasıl çalışır?
Overflow özelliği, bir ögenin içerisindeki içeriğin sığmadığı durumlarda ne yapılacağını belirleyen bir CSS özelliğidir. Örneğin, bir div ögesinin içine çok fazla metin yazıldığında ve div'in boyutları sınırlı ise, içerik taşacak ve sayfada hoş olmayan bir sonuç oluşacaktır. Overflow özelliği kullanılarak, taşan içeriğin nasıl görüntüleneceği belirlenebilir.

S2- Position özelliği ne işe yarar?
Position özelliği, bir ögenin bir sayfa içindeki konumunu belirlemek için kullanılan bir CSS özelliğidir. Örneğin, bir ögeyi belirli bir noktaya sabitlemek veya diğer ögelerden bağımsız olarak konumlandırmak istediğimizde position özelliğini kullanabiliriz. Position özelliğinin değerleri arasında static, relative, fixed, absolute ve sticky bulunur.

S3- Overflow özelliğinin değerleri nelerdir?
Overflow özelliği, four farklı değeri kabul eder: visible, hidden, scroll ve auto.

- Visible değeri, taşan içeriğin görünmesini sağlar.
- Hidden değeri, taşan içeriğin görülmemesini sağlar.
- Scroll değeri, taşan içeriğin kaydırma çubukları ile görüntülenmesini sağlar.
- Auto değeri, taşan içeriğin görülmesi durumunda kaydırma çubuklarını otomatik olarak gösterir.

S4- Position özelliğinin değerleri nelerdir?
Position özelliği, beş farklı değer kabul eder: static, relative, fixed, absolute ve sticky.

- Static değeri, bir ögenin normal belge akışında yer almasını sağlar.
- Relative değeri, bir ögenin normal belge akışında yer almasını sağlarken konumunu belirli bir mesafede kaydırabilir.
- Fixed değeri, bir ögenin sayfaya göre belirli bir konumda sabitlenmesini sağlar.
- Absolute değeri, bir ögenin diğer ögelerle ilişkisiz olarak belirli bir konumda yer almasını sağlar.
- Sticky değeri, bir ögenin sayfaya göre belirli bir konumda kalmasını sağlar, ancak kullanıcı sayfayı kaydırdığında konumu değişebilir.

Bu yazıda Overflow ve Position CSS özelliklerinin ne olduğunu, nasıl kullanıldığını ve örneklerle nasıl uygulandığını ayrıntılı bir şekilde açıkladım. Bu özellikler, web sayfalarının düzenlenmesinde ve öğelerin konumlandırılmasında büyük öneme sahiptir. Özellikle taşan içerikler ve özel konumlandırmalar için kullanılan Overflow ve Position CSS özelliklerini doğru bir şekilde kullanarak sayfalarınızı daha düzenli hale getirebilirsiniz."